Efectos sobre letras con CSS y jQuery

Actualizado el domingo, 19 junio, 2016

Vamos a aplicar efectos a las letras de un texto con la ayuda de jQuery. En este ejemplo, usaremos tres títulos que se encuentran cada uno dentro de un div. Estos divs poseen la clase letras, con ello podremos ubicarlos mediante jQuery.


<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>mi-web - Modificar letras</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="contenedor">
        <div id="titulo1" class="letras">
            <h1>Texto de muestra</h1>
        </div>
        <div id="titulo2" class="letras">
            <h1>Texto de muestra</h1>
        </div>
        <div id="titulo3" class="letras">
            <h1>Texto de muestra</h1>
        </div>  
    </div>  
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

jQuery: Para poder darle estilo a cada letra del título vamos a utilizar este pequeño script. Básicamente lo que hace es:
  • Buscar todos los elementos que posean la clase letras
  • Obtener el texto del título dentro del elemento anterior
  • Crear una variable vacía para contener las letras separadas
  • Reiterar cada una de las letras del título, guardando en la variable anterior un span por letra
  • Si el carácter es un espacio, el span se marca con la clase espacio; caso contrario con la clase letra
  • Finalmente, se limpia lo que hay en el contenedor y se colocan los span creados
$(function() {
    var divsTitulos = $('.letras');
    divsTitulos.each(function(){
        var divTitulo = $(this);
        var titulo = divTitulo.find('h1').text();

        var tituloSeparado = '';
        for (var i = 0; i < titulo.length; i++) {
            if (titulo[i] == ' ') {
                tituloSeparado += '<span class="espacio">' +  titulo[i] + '</span>';
            } else{
                tituloSeparado += '<span class="letra">' +  titulo[i] + '</span>';  
            };
        };

        divTitulo.empty().append(tituloSeparado);
    });
});

Cuando ejecutas el script, los divs quedarán así:

<div id="titulo1" class="letras">
  <span class="letra">T</span>
  <span class="letra">e</span>
  <span class="letra">x</span>
  <span class="letra">t</span>
  <span class="letra">o</span>
  <span class="espacio"></span>
  <span class="letra">d</span>
  <span class="letra">e</span>
  <span class="espacio"></span>
  <span class="letra">m</span>
  <span class="letra">u</span>
  <span class="letra">e</span>
  <span class="letra">s</span>
  <span class="letra">t</span>
  <span class="letra">r</span>
  <span class="letra">a</span>
</div>

CSS: Una vez que tenemos las letras de los títulos separadas, vamos a ver tres posibles variantes que podemos aplicarles. Empezamos definiendo el CSS de los elementos comunes:

/// body {

   background-color: #ccc;

}

  1. contenedor {
   width: 800px;
   margin: 0 auto;

}

.letras {

   font-family: Helvetica, Arial;
   text-transform: uppercase;
   margin: 30px;
   font-size: 60px;
   font-weight: bold;
   text-align: center;
   color: black;

}

.letra {

   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;

} ///

Para el primer ejemplo, vamos a hacer que todas las letras tengan la transparencia al 50%.

  1. titulo1 .letra.letra {
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   opacity: 0.5;

}

Al posicionar el mouse encima, quitamos la transparencia y agregamos sombra para resaltarla

#titulo1 .letra:hover {
    opacity: 1;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);

}

Para el segundo ejemplo, sólo vamos a indicar un borde (o stroke) al rededor de la letra, al momento de pasar el mouse por encima.

  1. titulo2 .letra:hover {
   text-shadow: 4px 0 0 #fff, 
               -4px 0 0 #fff, 
               0 4px 0 #fff, 
               0 -4px 0 #fff, 
               2px 2px #fff, 
               -2px -2px 0 #fff, 
               2px -2px 0 #fff, 
               -2px 2px 0 #fff;

}

Finalmente, para el último texto, indicamos que las letras estén separadas y agregamos un padding por izquierda.

  1. titulo3 .letra {
   letter-spacing: 15px;
   padding-left: 14px;

}

Al poner el mouse encima, agregamos un fondo en forma de círculo y una sombra a dicho círculo.

  1. titulo3 .letra:hover {
   background-color: orange;
   border-radius: 50%;
   box-shadow: 5px 5px 10px #000;

Agregar comentario