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 <span> 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 <span>:
<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.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
estan buenas las texturas,tambien los diseños de blog,conozco unas paginas que quizas te interesen,muchas en ingles y otras en español,te las puedo hacer llegar por correo para no hacerle “propaganda gratuita” sin tu permiso.
otra cosa,el codigo css para hacer sombra en texto ¿es solo ese o hay que agregar algo mas? lo estuve probando y nada.¿es solo para safari?