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
