SummArg | Cursos y recursos para webmasters

07/05/2011

Tipografías divertidas con jQuery

Lettering.js es un plugin jQuery que nos permite agregar efectos muy vistosos a nuestro texto en pocas líneas. Básicamente este pequeño script facilita la aplicación de diferentes estilos por letra o por palabra, siendo la imaginación el único límite.

Para utilizarlo en nuestro proyecto, primero debemos vincular el script y jQuery a nuestro documento.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="script/jquery.lettering.js"></script>

Configuramos lettering:

<script>
 $(document).ready(function() {
 $("#demo1 h1").lettering();
 });
 </script>

Y lo utilizamos:

<div id="demo1">
 <h1>Rainbow</h1>
 </div>

En el CSS colocamos:

.demo h1 { font-size:72px;  text-transform:uppercase; margin-bottom:0px;}
 .char2 { color: orange; }
 .char3 { color: yellow; }
 .char4 { color: blue; }
 .char5 { color: green; }
 .char6 { color: indigo; }
 .char7 { color: violet; }

El resultado es algo como esto:

Ver proyecto | Descarga

Dejar un comentario