La propiedad text-shadow, propiedad de CSS3, es muy nueva y por lo tanto la mayoría de los navegadores no la han implementado. Solo Safari, con sus versiones 3 y 4 lo soporta. Pero nosotros queremos que sea soportada por la mayoría de navegadores, así que vamos a implementar otra técnica para lograr sombras en el texto sin usar la propiedad text-shadow.

Para ello tendremos que dar clase a un párrafo y usar la etiqueta dentro de este para tomar el control de la posición del texto separado de la sombra.

Código CSS

El código CSS sería este (la propiedad display: block; y el juego de posiciones absolute y relative  son clave para lograr este efecto):

.shadow { position:relative; display:block; color:#fff; }
 .shadow span { position:absolute; display:block; top:0px; }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666; }

Código HTML

Creamos un párrafo y dentro ubicamos la etiqueta :

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

Estandarización

XHTML 1.0 Transitional válido.

CSS 2.1 válido.

Problemas

Esta técnica no funciona en Internet Explorer 6.

Ejemplo de su funcionamiento

Podemos ver un ejemplo de su funcionamiento en Design Meme.

Esperamos que os haya servido. Muchas gracias por leernos.