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.