Propiedad text-shadow

La propiedad text-shadow, permite dar sombra a un determinado texto. Esta sombra se puede modificar en cuanto a posición, nitidez y color. Usar esta etiqueta es muy eficiente estéticamente y además es algo muy moderno.

Sintaxis

En esta propiedad, se pueden poner de 2 a 4 valores: Posición eje X, Posición eje Y, Nitidéz y Color.
Así usamos text-shadow con todos sus valores:

text-shadow: 1px 1px 3px #FF0400;

El primer valor se posiciona de modo horizontal. Y si pones el signo menos (-) la sombra se correrá hacia la izquierda.
El segundo valor hace que la sombra se posicione verticalmente. Si precede un signo menos a este valor, la sombra se irá hacia arriba.
El tercer valor hace que la sombra tenga una especie de "esfumado" o le quita nitidez al aumentar el valor. Este valor es opcional.
El cuarto valor hace que le de color a la sombra. Este valor es opcional.
Así usamos text-shadow en CSS:

<style>
span{
text-shadow:1px 1px 3px #FF0400;
}
</style>

Así usamos text-shadow en HTML:

<span style="text-shadow:1px 1px 3px #FF0400;">

Ejemplos

Ejemplo de texto con sombra nítida

<span style="text-shadow:1px 1px #FF0400;">Ejemplo de texto con sombra nítida</span>

Ejemplo de texto con sombra esfumado menor

<span style="text-shadow:1px 1px 1px #FF0400;">Ejemplo de texto con sombra esfumado menor</span>

Ejemplo de texto con sombra esfumado medio

<span style="text-shadow:1px 1px 3px #FF0400;">Ejemplo de texto con sombra esfumado medio</span>

Ejemplo de texto con sombra esfumado mayor

<span style="text-shadow:1px 1px 6px #FF0400;">Ejemplo de texto con sombra esfumado mayor</span>

Ejemplo de texto con sombra nítida sin color

<span style="text-shadow:1px 1px;">Ejemplo de texto con sombra nítida sin color</span>

Los colores que se ponen al final del valor de la propiedad pueden ser establecidos como Colores Hexagecimal, RGB o con el nombre.
Para tener una lista de colores y saber cómo se usa, haz click aquí.

Posteado en: Propiedades