CSS: Texto con sombra usando text-shadow + Shadow Filter

Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.

La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.

Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.

Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:

.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}

Si no tuviéramos una hoja de estilos en nuestra página web, podemos ponerla en el head de la siguiente manera:

<style type="text/css">
<!--
.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}
-->
</style>

Para aplicar la sombra a un texto dentro del contenido de la página ponemos por ejemplo:

<p class="shadow">Ejemplo de texto con sombra</p>

Y este sería el resultado si le aplicamos la sombra a un texto con formato de título (h4):

Ejemplo de texto con sombra

 
Después podemos cambiar los valores de la sombra para que quede a nuestro gusto, sin olvidar que tendremos que hacer los cambios en las dos propiedades, intentando que la sombra sea similar en ambos navegadores.

Valores de text-shadow

1. Color de la sombra. (Ejemplo: #666666)
2. Desplazamiento de la sombra sobre el eje X. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
3. Desplazamiento de la sombra sobre el eje Y. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
4. Cantidad de efecto blur de la sombra. (Ejemplo: 3px)

Más información sobre text-shadow aquí y aquí.

Atributos de Shadow Filter

1. Color de la sombra (Ejemplo: color=’#666666′)
2. Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315.  (Ejemplo: Direction=135)
3. Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)

Más información sobre Shadow Filter aquí.