19

9

Text-shadow y texto 3D

Una de las propiedades que nos da CSS3 para decorar el texto, y que lleva bastante tiempo entre nosotros es el text-shadow, que nos permite crear sombras a cualquier texto.
Este atributo nos deja seleccionar el desplazamiento de la sombra, el desenfoque y el color, y haciendo simples trucos podemos crear incluso efectos 3D (más abajo explico como).

Usar text-shadow

Podemos añadir text-shadow a cualquier elemento y todo el texto que contenga tendrá sombra.
Nota: text-shadow se puede usar sin prefijos de navegadores, pero es recomendable usarlos para mejorar la compatibilidad.
Los parámetros que podemos establecer de text-shadow son:

• Desplazamiento horizontal: es el desplazamiento de la sombra sobre el eje X.
• Desplazamiento vertical: es el desplazamiento de la sombra sobre el eje Y.
• Desenfoque: es el nivel de desenfoque de la sombra.
• Color: podemos establecer el color de la sombra en cualquier notación.

1. text-shadow: [Desp. eje X] [Desp. eje Y] [Desenfoque] [Color];

Crear resplandor

Podemos crear resplandores en el texto poniendo como sombra colores claros, y hay que tener en cuenta que algunas veces es recomendable usar varias sombras juntas.

1. <!-- El siguiente elemento es el que tiene más resplandor -->
2. <div style="text-shadow: 0px 0px 30px #F09, 0px 0px 30px #F09, 0px 0px 30px #F09;">Text-shadow.</div>

Efecto 3D con text-shadow

Para crear este efecto debemos de añadir distintas sombras paralelas del mismo color y una final más oscura.
Para controlar la profundidad del elemento debemos de poner más o menos sombras, y para asegurarnos que sean paralelas (y además contiguas) debemos de establecer el mismo desplazamiento X e Y (por ejemplo: text-shadow: 20px 20px [...])

1. text-shadow: 1px 1px 0px #333,

2px 2px 0px #333,

3px 3px 0px #333,

4px 4px 0px #333,

5px 5px 0px #333,

6px 6px 0px #333,

7px 7px 0px #333,

8px 8px 0px #333,

9px 9px 0px #333,

11px 11px 10px #000;