La propiedad text-shadow permite crear sombra en el texto, pudiendo variar las posiciones de esta y el color de la sombra. Suele usarse en encabezados y títulos que deseen resaltarse, pero no se debe abusar de ella (Un ejemplo incorrecto sería usar esta sombra los párrafos).
Solo navegadores basados en Webkit, como Safari o Konqueror, o últimas versiones de navegadores basados en Gecko, como Firefox 3.5+ o basados en el motor Presto, como Opera, pueden interpretar la propiedad text-shadow. Los otros navegadores no la soportan. Mediante RGBA aplicaremos varios colores.
Un ejemplo de la propiedad text-shadow:
h1.test {
color: rgba(8, 207, 252, 0.5);
text-shadow: #6374AB 20px -12px 2px;
}
Se puede apreciar:
El color: Le hemos dado un color a la sombra: “#6374AB”.
La coordenada x de la sombra relativa al texto: 20 píxeles.
La coordenada y de la sombra relativa al texto: -12 píxeles.
Lo disperso que se encuentra la sombra (2px). Si aumentamos mucho este valor, la sombra será ilegible.
También podemos crear borde en el texto con esta propiedad, similar a lo que produce text-stroke, mediante este método, aunque únicamente funciona en las últimas versiones de Safari, Chrome y Firefox:
body { background: white; }
h1 {
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: white;
}
Si alguien tiene alguna duda sobre esta propiedad, puede escribirla en los comentarios.
Vía | Quirksmode
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
Sólo indicar que acabo de hacer una prueba con Firefox 3.5.2 y parece que soporta esta propiedad. Supongo que a empezado a ser soportada en Firefox a partir de la versión 3.5 porque con 3.0.5 no.
Por otra parte, no acabo de ver la utilidad de dicha propiedad y como has indicado es más fácil que se caiga en el abuso de la misma y se empiecen a ver muchas páginas con textos indescriptibles por la cantidad de sombras incluidas.