Texto con sombra

El CSS nivel 3 tiene una propiedad llamada "text-shadow" que permite añadir una sombra a cada letra de un texto. En su forma más simple, es más o menos así:

h3 {text-shadow: 0.1em 0.1em #333}

Esto añade una sombra gris oscuro (#333) un poco a la derecha (0.1em) y abajo (0.1em) en relación con el texto normal. El resultado se ve así:

(En agosto de 2005, no todos los navegadores son totalmente compatibles con la propiedad "text-shadow". El ejemplo anterior debería funcionar al menos en Safari y Konqueror).

Texto con sombra borrosa

La forma más sencilla de la propiedad "text-shadow" tiene dos partes: un color (como #333 en el ejemplo anterior) y un desplazamiento (0.1em 0.1em en el ejemplo anterior). El resultado es una sombra nítida con el desplazamiento indicado. Pero también puede hacerse que el desplazamiento sea impreciso, lo que da por resultado una sombra más o menos borrosa.

La cantidad de imprecisión se da como otro desplazamiento. Aquí se muestran dos líneas, una con un poco de imprecisión (0.05em) y la otra con mucha imprecisión (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Texto blanco legible

El uso de sombras puede hacer más legible el texto cuanto hay poco contraste entre el primer plano y el fondo. Lo que sigue es un ejemplo de texto blanco contra fondo azul pálido, primero sin sombra y luego con ella:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Varias sombras

También es posible poner más de una sombra. En general, el resultado es un tanto extraño:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
	  -0.3em 0.1em 0.1em #060,
	  0.4em -0.3em 0.1em #006}

Pero colocando acertadamente dos sombras, una oscura y la otra clara, el efecto puede ser útil:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Esto es un poco peligroso, como podrá apreciar si su navegador no admite la propiedad "text-shadow". De hecho, en este ejemplo los colores del fondo y del texto son casi iguales (#CCCCCC y #D1D1D1), de modo que sin las sombras apenas existe algún contraste.

Trazar letras como contornos

El ejemplo con dos sombras de la versión previa se puede llevar todavía más allá. Con cuatro sombras, es posible dar a las letras un contorno:

h3 {text-shadow: -1px 0 black, 0 1px black,
	  1px 0 black, 0 -1px black}

No es un contorno perfecto y, por ahora (agosto de 2005) sigue en discusión el tema de si CSS debería tener una propiedad separada (o tal vez un valor para la propiedad "text-decoration") que permita hacer contornos de mejor calidad.

Brillo de neón

Si se pone una sombra borrosa justo detrás del texto, es decir, con desplazamiento igual a cero, el efecto es un resplandor alrededor de las letras. Si el resplador de una sola sombra no es suficientemente intenso, basta repetir la misma sombra unas pocas veces:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
		0 0 0.2em #87F}