CSS es uno de los lenguajes básicos que cualquier desarrollador web puede aprender. Si ya estás familiarizado, sabrás que HTML se emplea para definir la estructura, CSS para los estilos y JavaScript para las interacciones. Al menos, es así como usualmente se trabaja con estos tres lenguajes para crear un sitio web completamente funcional. Sin embargo, estos tres lenguajes han evolucionado de manera que ahora permiten mucha mayor libertad y creatividad a los desarrolladores. En ciertos casos, ni siquiera es necesario hacer uso de JavaScript y se pueden realizar modificaciones diversas sólo con CSS. Muchos desarrolladores utilizan el conocimiento que poseen para desafiarse a sí mismo y crear composiciones diversas como patrones de diseño y animaciones en 3D. En este artículo, hemos recopilado algunos ejercicios y experimentos de desarrolladores de CodePen en donde se hace uso de efectos de texto CSS. Así es, en su mayoría sólo se emplea CSS para los impresionantes efectos que te mostraremos a continuación:

Elastic Stroke CSS+SVG

Este efecto es más decorativo pues el texto completo no se hace visible por mucho tiempo, sin embargo, el resultado es bastante genial. Se hace uso de una paleta de tres colores y las líneas que conforman las palabras van recorriendo poco a poco el texto. La línea de colores va deslizándose por el contorno de las palabras y sólo a final podemos ver el texto por completo.

I ♥ Blur

Este es un efecto bastante interesante: el texto posee un grado de desenfoque alto que no permite diferenciar las palabras que lo conforman, pero al posar el cursor sobre este texto, se puede apreciar sin problemas ya que el desenfoque se elimina.

CSS3 Text Shadow Effect

Este desarrollador nos trae cuatro tipos de sombras que pueden ser perfectas para añadir a los títulos de tu página de inicio. Se dividen en “Elegant”, que es la típica sombra larga popular en el diseño flat; “Deep”, que da cierto sentido 3D a las letras que conforman la palabra; “Inset”, que simula el grabado de dicha palabra en algún tipo de superficie y “Retro”, que es perfecta si tu marca tiene un estilo vintage.

JS/CSS3 Jittery Text Effect

Este efecto hace que el texto se mueva ligeramente, como si estuviera temblando. Se refuerza el uso de este efecto con la elección de fuente para el texto. Sin duda, es una gran forma de poder captar la atención de las personas mediante un efecto sencillo.

Text animation

Este es un efecto de transición bastante sencillo: consiste en cambiar una o más palabras de una frase, de modo que hay ciertas palabras que se quedan fijas mientras que otras cambian con un efecto bastante fluido.

SVG Glitch

Este efecto se ha realizado con CSS y gráficos SVG e intenta simular el efecto de fallo que suelen experimentar algunos televisores cuando la señal de cable está fallando, por esta razón el texto presenta ciertos cambios de color y oscilaciones inusuales.

Neon Text with CSS3

Como su nombre indica, este efecto se aplica a textos para que se asemejen a los carteles y anuncios de neón que se suelen ver en las calles y que son bastante llamativos cuando es de noche. El desarrollador ha hecho uso de una tipografía que realmente favorece este efecto.

Bouncy Letters

Esta animación permite que todas las letras de la palabra escrita reboten ligeramente, todas las letras rebotan al mismo tiempo. Es un efecto bastante sencillo, pero podría ser interesante emplearlo en algún título que quieras destacar.

Slashed CSS Effect

Este efecto te permite dar un aspecto de corte limpio en tus textos, de manera que la palabra todavía es legible y le agregas un toque único a los textos de tu sitio. Puede ser perfecto para reforzar el mensaje de un título de tu sitio web.

Focus

Este efecto de texto te permite desenfocar y enfocar el texto, como si estuvieras viéndolo desde una cámara fotográfica semi-profesional y estuvieras ajustando el lente para realizar la toma. Se ha realizado enteramente en HTML y CSS.

Animated Text Fill

En este ejemplo, el texto funciona como una máscara de capa. Si bien es un efecto que muchos desarrolladores suelen probar, hay una sorpresa inesperada: una animación que se puede ver en el fondo. Ya que el contorno de las letras son una máscara de capa, la animación se presenta dentro de las letras. Es un efecto bastante único y podría ser perfecto para tu sitio web, en particular si estás pensando incluir alguna animación sencilla.

CSS 3D

Como su nombre indica, este efecto intenta simular el aspecto que tienen los textos en 3D cuando los vemos sin los lentes especiales. Este efecto podría ser adecuado para sitios web que estén relacionados con el uso de efectos 3D o para aquellos que han creado una marca alrededor de este concepto.

Animated Signing of Scripture (SVG Paths)

Esta animación hace uso de trazos SVG para poder simular el proceso de escritura de una firma. El concepto de esta animación lo hace adecuado para cualquier marca, aunque tal vez sería más efectivo si se utiliza en marca de ropa que poseen nombres propios.

Milky Font Effect

Este efecto permite la simulación de letras en 3D. El aspecto es tan cercano a la realidad que parece una fotografía o incluso un cuidadoso trabajo de edición realizado en Photoshop.

Text Effect

Esta animación permite que la palabra se vaya revelando poco a poco mientras que una colorida paleta de colores dibuja las letras de tal modo que al finalizar la animación, cada letra posee dos colores.

Cosmos

Esta animación es particular para este logo. Es bastante apto ya que las “o” que conforman la palabra “Cosmos” giran en una órbita. Es ideal para usarlo en la página de inicio o destino de una página.

En conclusión…

En la actualidad, gracias al avance de las tecnologías, el lenguaje CSS ha podido evolucionar y abre una serie de posibilidades para los desarrolladores. Ahora, con el uso de CSS puede crear efectos diversos y complejos que sólo se creen posibles con programas de edición como Photoshop. Por supuesto, mucho depende de la destreza del desarrollador, pero es interesante poder apreciar todas las capacidades que posee el lenguaje CSS.

Esperamos que estos ejemplos te sirvan como inspiración, ya sea que tengas que crear un sitio web o si simplemente deseas poner a prueba tus habilidades sobre este lenguaje. Te invitamos a visitar las páginas de CodePen de todos los desarrolladores cuyos código hemos colocado en esta página, pues poseen proyectos muy interesantes que seguro serán de tu agrado.