Como todos sabemos las propiedades text-shadow y los filtros de Internet Explorer para esta propiedad no son las mejores opciones si queremos agregar algo de sombra a los textos, títulos o demás elementos de nuestro sitio. Son interpretados de diferentes maneras por todos los navegadores y algunos ni siquiera lo hacen, llevando a los diseñadores a obviar este efecto en los sitios.

Lo que quiero comentarles es una alternativa para alguna ocasión determinada en que quieran agregar sombra a un texto sólo utilizando CSS, preferentemente en algún título o encabezado destacado. La idea es bastante simple: Usaremos el mismo texto dos veces, uno que funcionará como texto y otro que será la sombra. Utilizando la propiedad position: relative ubicaremos el texto por encima de la sombra y lo moveremos para realizar el efecto deseado.

Para realizar esto primero debemos establecer el texto que funcionará como sombra dentro de un span, un p, un div o el elemento que querramos y le agregamos la clase shadow (class=”shadow”). Luego copiamos el texto a una nueva etiqueta y le agregamos la clase text. Desde el CSS movemos el segundo elemento (bajo la clase text) hacia arriba hasta ubicarlo de manera que el primer elemento sobresalga a modo de sombra. A esta altura creo que ya estoy escribiendo de más porque la idea es muy simple.

Para dejar todo más ordenado y poder repetirlo podemos establecer alturas fijas para estos elementos y así saber la distancia en que debemos mover el segundo elemento. Los colores, tipografías y demás queda a criterio de cada uno y de lo que necesite. Básicamente el XHTML quedaría algo así:

<span class="shadow">Texto de ejemplo</span>
<h2 class="text">Texto de ejemplo</h2>

Y el CSS algo así:

span. shadow {
display: block;
height: 30px;
color: #ccc;
}

h2.text {
position: relative;
bottom: 30px;
left: 2px;
color: #333;
}

Pueden ver algunos ejemplos en este enlace.

Está claro que semánticamente no es algo perfecto, tener el mismo texto dos veces no tiene demasiado sentido, pero como les comenté hace anteriormente, para alguna oportunidad específica puede servir sobre todo porque es totalmente crossbrowser y muy adaptable a lo que necesitemos.