Tengo que decir que el sistema que prefiero sobre todo es "Cufon". Pero Lettering.js tiene tantas posibilidades como podáis imaginar: insertar fuentes poco habituales y diseñar cada letra, cada palabra o grupo, cada línea ... jugando con los tamaños, sombras, tipos de fuentes ...
Para mí tiene dos problemas:.- Usa query, lo que puede resultar bastante obstructivo (a pesar de los "jquery no conflict")
.- Resulta algo complicado de insertar (por lo que se refiere al CSS: el HTML se construye a base de "span")
Y, en fín: podéis ver los increíbles ejemplos que nos muestran en la página del autor y el que he construído yo basándome en ésta y que podéis ver en la cabecera de este blog
Bueno: vamos a ver cómo puedo explicarlo de forma sencilla:
Scripts:
Lettering. js
Por si vuestros lectores no tienen Javascript emsamblado, casi mejor que os descargáis la versión "min" del script, que es la que he usado yo en mi prueba. De forma que esta parte iría así:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='https://sites.google.com/site/.../Inicio/jquery.lettering-0.6.1.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".header h1").lettering();
});
</script>
Podéis ver que el último script es el que lleva la definición sobre la que queréis apicar el efecto, en este caso "header h1", pero podría ser "#logo", "h2" o todas ellas (pero en líneas separadas)
Vamos con el CSS:
Antes de nada, decir que casi mejor que uséis en la plantilla un "reset" para el CSS.
h1, h2, h3, h4 { }
h1 { font-size: 48px; text-transform:capitalize; margin-bottom: 0em; }
h2 { font-size: 28px; margin-bottom: 0.5em; }
h3 { font-size: 34px; margin-bottom: 0.5em; }
h4 { margin-bottom: 0.5em; }
Este es un ejemplo sencillísimo, que lo que hará es "ordenar" al script que coloque diferentes tamaños para cada selector y la posición que ocuparán. Pero se puede complicar mucho más:
Imaginemos que queremos un color distinto para cada letra de una palabra (título de entrada o título del blog y colocar cada letra, además de proporcionarles sombras, marcarles los espacios, un "hover", etc ...
.header h1{font-weight: normal;text-transform:capitalize;font-family: Diamond Gothic;font-size:65px;margin-bottom:-32px;margin-left:10px;color:#999999;text-shadow:#863027 -4px 4px 0;margin-top:30px;}
.header h1 span{display:inline-block;position:relative;letter-spacing:-1px;-webkit-transition:all 0.2s ease-out;}
header h1 span:hover{top:3px}
.header h1 .char2, .header h1 .char11{color:#e36b23;text-shadow:#9b4d1f -4px 4px 0}
.header h1 .char3, .header h1 .char10{z-index:10;color:#e6c92e;text-shadow:#9c8b26 -4px 4px 0}
etc ...
Obviamente, cuando queremos introducir tantas variables, el css se complica (que me lo digan a mí, que se me da fatal, je)
La definición "char" se refiere al carácter y el ´número que ocupa en la palabra, de forma que "char1" es a primera letra de la palabra, "char2" la segunda, y así sucesivamente.
Y vamos al HTML:
<h1 id="header h1"><span class="char1">J</span><span class="char2">u</span><span class="char3">e</span><span class="char4">G</span><span class="char5">o</span><span class="char6">-</span><span class="char7">O</span><span class="char8">s</span></h1>
Aquí le decimos al script que queremos unas letras más grandes y otras más pequeñas, por ejemplo.
En fín... que se puede hacer prácticamente todo lo que uno quiera. Y a las pruebas me remito, a la vista de los increíbles ejemplos que muestra Lettering. js en su página, respecto a lo que otros usuarios han hecho con el script.
En el título de la página del hack, a la derecha, tenéis el enlace para descargar los archivos: os llevará a otra página donde tenéis ejemplos de HTML y CSS. Arriba del encuadre de estos ejemplos, podéis ver un "downloads", donde podéis descargaros la versión "min" del script.
✍ ¿Quieres hacer algún comentario? ✍