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í.
Cuando entremos a otra entrada o página, la imagen desaparecerá.
