21

12

Texto con efectos con Text-shadow (I)

Os he mostrado en varias ocasiones el potencial de Text-shadow de CSS3, como en el efecto de fuego que creé, pero ahora os voy a mostrar un par de efectos nuevos, que serían ideales para un título de página.
El primero es estilo vintage, más serio, y el segundo estilo neón (con su resplandor) y como no podía ser de otra forma he hecho los ejemplos con LESS y os daré el snippet.

Vintage

Este ejemplo hecho con Text-shadow está formado por tres sombras del mismo color del fondo y otra del mismo color de la letra (un poco más separada), lo que crea el efecto de vintage.

1. color: #d2d2d2;
2. text-shadow: 1px 1px 0px #666,

2px 2px 0px #666,

3px 3px 0px #666,

4px 4px 0px #666,

/* Sombra del color de la letra */

5px 5px 0px #d2d2d2;

Neón

Este otro efecto, el de neón podría funcionar muy bien en páginas oscuras, y podría quedar bien en cualquier detallito, como algún título o en el pie de página... solo hay que ser creativos.
Este ejemplo tiene un color muy claro para la letra, y con este mismo color se crea un par de sombras claras que difuminan la letra (usamos varias para que se vea el resplandor más llamativo, como comenté con Box-shadow) y después añadimos varias sombras de un color más intenso que sería el resplandor del neón.

1. color: #c8efee;
2. text-shadow: 0px 0px 10px #c8efee,

0px 0px 10px #c8efee,

/* Repetimos el resplandor */

0px 0px 40px #46c9c5,

0px 0px 40px #46c9c5,

0px 0px 40px #46c9c5,

Y si lo queréis probar y ajustar a vuestro gusto os paso el snippet de LESS.