11 efectos de textos con CSS y un poco de código HTML

efectos de textos con CSS

Una recopilación con 11 efectos de textos con CSS, para que los implementes en cualquier página web. Para utilizar uno de estos efectos, lo único que tienes que hacer es copiar las líneas de código de CSS y de HTML, del efecto que más te guste y llevarlas a tu página web.

Todos los efectos se pueden editar de manera muy fácil, puedes cambiar las palabras de todos los textos, el tamaño de las letras, la orientación, colores, etc. Y todos los cambios los vas a poder ver al instante, gracias al editor de texto en linea que acompaña a cada uno de los efectos.


Ejemplos de efectos de textos con CSS y algo de HTML


Algunos de estos efectos en verdad que me sorprendieron. Por que con muy poco código puedes crear una animación bastante elaborada. Y eso es bueno por que el peso de la pagina no se verá afectado. Tampoco tardará más tiempo en cargar, de hecho estos efectos pesan menos que una imagen tipo .jpg

efectos de textos con CSS

De los 11 ejemplos de efectos de textos con CSS que más me gustaron, se encuentra éste de aquí. Por que utiliza muchos colores y el contorno de la letra aparece y desaparece constantemente. Aquí pueden ver el efecto en funcionamiento, también pueden ver los códigos | [ Elastic stroke ]

efectos de textos con CSS

El siguiente efecto es más simple que el anterior. Aquí cambian los textos como si fuera una especie de carrusel. | [ Text animation ]

efectos de textos con CSS

Este efecto utiliza más lineas de código, pero la animación es muy buena. Escribes la palabra que quieras, y dos letras estarán girando constantemente, al rededor de un circulo. | [ Cosmos ]

efectos de textos con CSS

El siguiente efecto de textos con CSS creo que sólo funcionan con algunos navegadores. Pero es muy bueno, el texto que escribas se verá como si estuviera temblando. Estos textos son muy utilizados en los títulos de animaciones | [ Suiggly Text ]

efectos de textos con CSS

Este efecto lo que hace es colocar sombras a los textos. Son cuatro tipos de sombras las que se pueden crear. Sombra clásica, sombra difuminada, sombra interior y sombra retro | [ Text shadow wffects ]

efectos de textos con CSS

El siguiente efecto es uno de los más elaborados, por que tienen varios efectos. Primero aparecen las letras de arriba abajo, con una sobra a la derecha de cada letra. Una vez desplegados los textos, cuando cuando pasas el puntero del ratón sobre una letra, una animación se activa. Es como si la letra fuera una especie de puerta que se abre o se cierra | [ Opening type ]

efectos de textos con CSS

Un efecto de escritura como si estuvieras haciendo una firma. Aquí si es más complicado editar los códigos para meter tu propia firma. Es para los que saben mucho de código, pero el efecto es muy bueno | [ Animated signing ]

efectos de textos con CSS

Un texto con temblores es el efecto que puedes conseguir utilizando algo de código CSS y HTML. El resultado es bastante bueno, simple pero efectivo | [ SVG Glitch ]

efectos de textos con CSS

Este efecto es el que más diseño gráfico tiene de todos los demás. Por que utiliza distintas familias tipográficas, algunas de ellas se encuentran centradas. Otras tienen curvas, etc. No tienen animación pero todo está hecho con puro código | [ Vintage Typography ]

efectos de textos con CSS

Textos en 3D utilizando puro CSS, también se pueden hacer. La animación de las palabras es muy fluida | [ 3D CSS ]

efectos de textos con CSS

El siguiente efecto es para colocar sombras, pero lineales en los textos. Es como un efecto vintage | [ Dashed Shadow ]

¿Cuál fue su efecto favorito de los 11 ejemplos?