Efectos sobre letras con CSS y jQuery

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.

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

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

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 {

}

  1. contenedor {

}

.letras {

}

.letra {

} ///

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

  1. titulo1 .letra.letra {

}

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

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 {

}

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

  1. titulo3 .letra {

}

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

  1. titulo3 .letra:hover {

Efectos sobre letras con CSS y jQuery
VOTA EL ARTICULO POR FAVOR

Share on FacebookTweet about this on TwitterShare on Google+Digg thisPin on PinterestShare on LinkedInPrint this pageEmail this to someone VOTA Y COMPARTE

Agregar comentario

*

Suscribete

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.

Tu suscripción a sido realizada con éxito.