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 {

facebook Efectos sobre letras con CSS y jQuerytwitter Efectos sobre letras con CSS y jQuerygoogle Efectos sobre letras con CSS y jQuerydiggit Efectos sobre letras con CSS y jQuerypinterest Efectos sobre letras con CSS y jQuerylinkedin Efectos sobre letras con CSS y jQueryprint Efectos sobre letras con CSS y jQueryemail Efectos sobre letras con CSS y jQuerySi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

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