Sombras en los textos usando CSS

A algunos les ha causado sorpresa que exista una propiedad CSS que permite colocar sombras en un texto y me han mandado una página de Design Mem para que pudiera explicar la forma de utilizarla.

La propiedad se llama text-shadow pero, aunque está definda y aceptada por la W3C, sólo está implementada en los navegadores Safari ... no sólo Internet Explorer no respeta los estándares.

Para crear este efecto en otros navegadores, debemos recurrir a trucos.

Por ejemplo, si somos de esos pocos que usan Safari, usando esta propiedad, un texto se vería así:

This is white text, on a white background. Yet in Safari, you can read this, because of the black text-shadow.

Como probablemente no lo estemos usando ya que no está muy difundido, esto es lo que veríamos:

En la página de referencia nos muestran una forma de simular este este efecto en Firefox usando un poco de CSS:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Para agregar el efecto, vamos a duplicar el texto y usar el atributo TITLE. Como mostraremos dos textos, uno de ellos lo desplazaremos levemente usando la etiqueta SPAN:

<p class="shadow" title="... el texto ...">
<span>... el texto ...</span>
</p>

Todo se limita a crear una clase CSS llamada shadow que tendrá estas propiedades:

<style>.shadow  {
color:#FFFFFF;
display: block;
position: relative;
}

.shadow span {
display: block;
position: absolute;
top: 0px;
}

.shadow:before {
display: block;
color: #222222;
content: attr(title);
padding: 1px;
} 
</style>

Un poco raro ¿verdad? y encima, en Internet Explorer no funciona.

Tal vez sea mejor pensar de otra forma y no complicar las cosas. Es cierto que, para crear un texto con sombras, lo mejor es colocar ese texto repetido y desplazar uno de ellos pero, es más sencillo hacerlo utilizando propiedades "normales" y de tal manera, lograr que funcione en cualquier navegador.

Un texto con sombrasUn texto con sombras

Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
color: #FFFFFF;
font-family: Verdana; font-size: 50px;

Propiedades de la etiqueta SPAN
position: absolute; left: 1px; top: 1px;
color: #000000;
font-family: Verdana; font-size: 50px;

Este tipo de técnica la podemos directamente en un texto específico agregando las propiedades en el atributo STYLE:

<div style="position: relative; top: 0px; left: 0px; ... ">
... el texto ...
<span style="position: absolute; top: 1px; left: 1px; ... ">
... el texto ...
</span>
</div>

Un texto con sombrasUn texto con sombras

Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 50px;
padding: 5px;
color: #000000;
background-color: #FFFFFF;

Propiedades de la etiqueta SPAN
position: absolute; left: 2px; top: 2px;
font-family: Verdana; font-size: 50px;
color: #FFFFFF;

Las variaciones las logramos probando y probando y volviendo a probar. Cambiando las coordenadas de los desplazamientos (left y top) o lo colores del los textos (color):

Un texto con sombrasUn texto con sombras

Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 50px;
color: rgb(255, 153, 51);

Propiedades de la etiqueta SPAN
position: absolute; left: 1px; top: -2px;
font-family: Verdana; font-size: 50px;
color: rgb(153, 51, 0);

O superponiendo textos que tengan diferentes tamaños (font-size):

Un texto con sombrasUn texto con sombras

Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 51px;
color: CornflowerBlue;

Propiedades de la etiqueta SPAN
position: absolute; left: 0px; top: 7px;
font-family: Verdana; font-size: 50px;
color: Bisque;

Todo funciona porque la etiqueta DIV tiene la propiedad position: relative y la etiqueta SPAN la propiedad position: absolute de tal manera que podemos controlar la posición de salida de los textos usando left y top; si en ambas etiquetas los valores son cero, los textos se superponen y el que "se ve" es el contenido en la etiqueta SPAN que queda "encima" del otro:

Un texto con sombrasUn texto con sombras

Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 50px;
color: Blue;

Propiedades de la etiqueta SPAN
position: absolute; left: 0px; top: 6px;
font-family: Verdana; font-size: 50px;
color: CadetBlue;

Por cierto, en el Blog de Gem@ hay un artículo donde se habla de una técnica similar con la particularidad de utilizar etiquetas diferentes para los textos superpuestos:

Un texto con sombras

Un texto con sombras

Por último, en ese mismo post, La Bloguería comenta la posibilidad de utilizar un texto y un subtexto diferente.

USANDO SOMBRASUn texto con sombras