Texto con sombra

facebook-svg gplus-svg twitter-svg

En el CSS3 hay dos propiedades que generan sombras: text-shadow y box-shadow. Practicamente el mismo perro con distinto collar. Analicemos primero el texto sombreado ( text-shadow ).

text-shadow: desplazamiento horizontal desplazamiento vertical desenfoque color;

Desplazamiento horizontal (h-shadow)

En el siguiente ejemplo la sombra tiene un desplazamiento vertical muy pequeño. De esta manera, el desplazamiento horizontal ( positivo: 10px; negativo: -10px ) es muy evidente.


#text1{text-align:center;text-shadow:10px 1px 1px #ccc; line-height:1.5em;}
#text1 .negativo{text-shadow:-10px 1px 1px #ccc;}

positivo
negativo

Para el desplazamiento vertical podemos utilizar tanto valores positivos como negativos.
Los valores positivos desplazarán la sombra hacia la derecha, mientras que los valores negativos desplazaran la sombra hacia la izquierda.

Desplazamiento vertical (h-shadow)

En el siguiente ejemplo la sombra tiene un desplazamiento horizontal muy pequeño. De esta manera, el desplazamiento vertical ( positivo: 10px; negativo: -10px ) es muy evidente.


#text2{text-align:center;text-shadow:1px 10px 1px #f00; line-height:2em;}
#text2 .negativo{text-shadow:1px -10px 1px #f00;}

positivo
negativo

Para el desplazamiento horizontal podemos utilizar tanto valores positivos como negativos.
Los valores positivos desplazarán la sombra hacia abajo, mientras que los valores negativos desplazaran la sombra hacia arriba.

Desenfoque (blur)

Probemos ahorra el desenfoque ( 5px )... que hace exactamente esto: difumina la sombra. Esta vez la sombra está desplazada tanto horizontalmente como verticalmente 10px.

#text3{text-align:center;text-shadow:10px 10px 5px #f00;}

text

Color

En lo que concierne el color, podemos utilizar colores hex, rgb, hsl o los nombres de los colores en ingles.
Es interesante saber que también podemos poner el color delante.

#text4{text-align:center;text-shadow: rgb(255,0,0) 10px 10px 5px;}

text

Dos o más sombras ¬°Ooh La La!

Y si queremos, podemos, aunque no se si debemos ( es cuestión de gustos ) aplicar varias sombras - debidamente separadas por una coma ( , ).

#text5{text-align:center;text-shadow: #f00 10px 10px 5px , -10px -10px 5px #00f;}

text

Vea un ejemplo de texto tridimensional aplicando varias sombras con text-shadow. Utilice "Ver código fuente" del menú de su navegador para encontrar y estudiar el código.

Enlaces útiles

- El soporte de text-shadow en los navegadores.