20 Efectos de texto CSS y SVG increíbles

Cada vez más CSS3 y SVG nos permite jugar con los textos y la tipografía de forma creativa. Poco a poco el diseño web se va transformando en una especie de “photoshop”, donde los navegadores modernos pueden renderizar efectos de texto realmente asombrosos.

Para que podáis explorar las posibilidades de css3 con los textos, os traigo 20 efectos que despertarán vuestra imaginación y que quizás podáis incorporar en vuestros proyectos web.

1. Elastic Stroke Animation

Colorida animación elástica con css y svg +html5. Con <svg> dibujamos las líneas discontinuas usando el atributo stroke-dasharray. En él hay que definir una sucesión de números que crea el patrón a seguir – — – —.

See the Pen Elastic stroke CSS + SVG by Funny Frontend (@funnyfrontend) on CodePen.

 

2. Efecto Glitch

Animación que simula el efecto glitch art (imágenes de vídeo dañadas) en tu texto, usa svg filter y html.

See the Pen SVG Glitch by Funny Frontend (@funnyfrontend) on CodePen.

 

3. Logo con solo CSS

Este chico llamado Hugo ha recreado el logo de Shop Talk usando css3.

See the Pen Shop Talk logo made in CSS by Funny Frontend (@funnyfrontend) on CodePen.

 

4. Efecto slashed o tajo

Idea de Robet Messerle para simular un efecto tipográfico cortado con el text css.

See the Pen Slashed CSS Effect by Funny Frontend (@funnyfrontend) on CodePen.

 

5. Varios efectos con sombras

Aquí tienes 4 variantes de css text shadow o sombra css donde elegir.

See the Pen CSS3 text-shadow effects by Funny Frontend (@funnyfrontend) on CodePen.

 

6. Máscara con svg + css

Efecto de máscara con svg y css que simula la clásica máscara de recorte de programas de edición vectorial como Illustrator.

See the Pen SVG text mask by Funny Frontend (@funnyfrontend) on CodePen.

 

7. Animación de texto

Esta animación de texto con css (css rotate text) alterna la segunda palabra de la frase con tres palabras más. Muy útil para presentar las actividades de tu empresa en la home de la web.

See the Pen Text animation by Funny Frontend (@funnyfrontend) on CodePen.

 

8. Texto 3D con css

Jugando con el css text-shadows se puede lograr un efecto de texto 3d como este:

See the Pen Hit The Floor Text Effect by Funny Frontend (@funnyfrontend) on CodePen.

 

9. Varios efectos de máscara de texto

En este caso se juega con la propiedad css background-clip, que permite que un fondo concreto de un elemento se recorte de acuerdo al texto ingresado. Se usa mucho para las máscaras de texto.

See the Pen -webkit-background-clip:text CSS effect by Funny Frontend (@funnyfrontend) on CodePen.

 

10. Efecto luces o advertencia

El usuario Moklick ha creado este efecto de luces y sombras al texto, transmitiendo la sensación de peligro o advertencia.

See the Pen CSS Text-FX by Funny Frontend (@funnyfrontend) on CodePen.

 

11. Tipografía animada al estilo firma

Usando una script font y con JavaScript + SVG se puede animar el path de ésta para simular una animación de firma para este texto css.

See the Pen Animated signing of signature (SVG paths) by Funny Frontend (@funnyfrontend) on CodePen.

 

12. Logo animado con css

Divertido logo animado basado en el de la serie COSMOS.

See the Pen COSMOS by Funny Frontend (@funnyfrontend) on CodePen.

 

13. Blur text o efecto desenfoque

Con text shadow y @keyframes se puede lograr efectos de desenfoque de texto sin recurrir a demasiados efectos de sombra.

See the Pen Fun with Blurred Text by Funny Frontend (@funnyfrontend) on CodePen.

 

14. Efecto anaglifo o efecto tridimensional

El efecto anaglifo estimula la sensación de tridimensionalidad con imagenes de dos dimensiones superponiendo éstas. Se ha intentado simular el efecto en este texto, aunque no es muy óptimo para el 3D queda bastante bien.

See the Pen Anaglyphic text effect by Funny Frontend (@funnyfrontend) on CodePen.

 

15. Texto magnético

Si adoras el text color css y la propiedad css text-transform este será tu efecto de texto css3 favorito.

See the Pen Magnetype by Funny Frontend (@funnyfrontend) on CodePen.

 

16. Texto css psicodélico

Yo no se vosotros pero me estoy imaginando esto con unos colores vintage y quedaría muy bien en cualquier web estilo retro.

See the Pen CodePen Text Effect by Funny Frontend (@funnyfrontend) on CodePen.

 

17. Trazado dinámico con svg y css

Sin javascript de por medio, este complejo efecto se crea usando css y svg, ideal para sitios web basados en música o algún festival.

See the Pen SVG Stroke Text Effect by Funny Frontend (@funnyfrontend) on CodePen.

 

18. Texto de Star Wars con css

Como fan de Star Wars solo puedo declarar este codepen como simplemente maravilloso. Ideal para usarlo en la presentación de tu portfolio o algo parecido, para introducir tu biografía.

See the Pen Star Wars 3D Scrolling Text in CSS3 (with music) by Funny Frontend (@funnyfrontend) on CodePen.

 

19. Auténtico 3D con puro CSS3

“Pero tío, si mezclar los trazados, sombras y 3D está pasado de moda”, vale sí, pero la finalidad de este CodePen es mostrar las posibilidades que tienes con css 🙂

See the Pen 3D CSS Typography by Funny Frontend (@funnyfrontend) on CodePen.

 

20. Remesa de 10 efectos hover

Y el último y no por ello menos interesante, un CodePen con 10 hover effects con css3 buenísimos. Deberías estudiarlos con detenimiento.

See the Pen 10 stunning hover effects with scss by Funny Frontend (@funnyfrontend) on CodePen.

¡Y se acabó!, si te apetece que añada algún CodePen con css text effects más, comenta o escribe cuál te gustaría simular en el texto css de tu web.

5 Comentarios

  1. Víctor 6 marzo, 2016 Responder
  2. Tovar 13 agosto, 2016 Responder
  3. carlos david correa santillan 6 septiembre, 2016 Responder
  4. Miguel 29 noviembre, 2016 Responder

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *