Sombras: la propiedad text-shadow

sombras

sombras

más sombras

Un tweet de Ariane me llevó a una entrada de CSS No Lanche. El título era prometedor: CSS text-shadow. Sombras en los textos usando CSS.

La verdad es que no tenía muchas esperanzas porque es algo de lo que se habla desde hace mucho y, aunque está definida y aceptada por la W3C, sólo podía usarse en Safari. Pero, oh sorpresa, parece que ahora también puede aplicarse en Firefox, lo cuál es un avance.

La propiedad es muy sencilla y tiene cuatro parámetros:

text-shadow: posicionX posicionY amplitud color;

posicionX indica el desplazamiento horizontal de la sombra con respecto al texto (positivos hacia la derecha, negativos hacia la izquierda)
posicionY indica el desplazamiento de la sombra con respecto al texto (positivos hacia abajo, negativos hacia arriba)
amplitud es el tamaño de esa sombra, a mayor valor, el efecto de blur es mayor
color es obviamente el color de la sombra

un ejemplo:

text-shadow: 10px 5px 5px #000;

Esta serían las definiciones de los tres primeros ejemplos:

h1.demoSombras1 {
  color: #000;
  font-size: 130px;
  text-shadow: 5px 5px 15px #AAA;
}

h1.demoSombras2 {
  color: #999;
  font-size: 130px;
  text-shadow: 10px 10px 10px #000;
}

h1.demoSombras3 {
  color: #345;
  font-size: 80px;
  text-shadow: 1px 1px 1px #ABC;
}

donde, en todos los casos, el HTML es un encabezado:

<h1 class="nombreClase"> el texto </h1>

muchas sombras

En este otro ejemplo, se agregan dos sombras, separadas por comas:

h1.demoSombras4 {
  color: #101921;
  font-size: 80px;
  text-shadow: 3px 3px 10px red, -3px -3px 10px yellow;
}

Para versiones anteriores a Firefox 3.5, hay una extensión llamada Text Shadow 0.3.2008042901 que permite simular la propiedad.

Aparentemente, en Safari sólo se admite una sombra, Opera tiene un máximo y en los navegadores Mozilla la cantidad es infinita. Para Internet Explorer hay un filtro que hace algo similar: por ejemplo

filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);

shadow en Internet Explorer