Skip to main content

Aplicar texto sombreado con CSS text-shadow


CSS text-shadow

 

p {
text-shadow: 1px 1px 1px #000;
}

Puede aplicar varias sombras de texto separando las comas

p {
text-shadow: 1px 1px 1px #000,
3px 3px 5px blue;
}

Los primeros dos valores especifican la longitud del desplazamiento de sombra. El primer valor especifica la distancia horizontal y el segundo especifica la distancia vertical de la sombra. El tercer valor especifica el radio de desenfoque y el último valor describe el color de la sombra:

1. value = La coordenada X
2. value = La coordenada Y
3. value = The blur radio
4. value = El color de la sombra

El uso de números positivos como los dos primeros valores termina colocando la sombra a la derecha del texto horizontalmente (primer valor) y colocando la sombra debajo del texto verticalmente (segundo valor).

El tercer valor, el radio de desenfoque, es un valor opcional que se puede especificar pero no es necesario. Es la cantidad de píxeles que se estira el texto que causa un efecto de desenfoque. Si no usa el tercer valor, se trata como si hubiera especificado un radio de desenfoque de cero.

Además, recuerde que puede usar valores RGBa o HSLa para el color, por ejemplo, una transparencia del 40% de blanco:

See the Pen Complex Text Shadow Examples by Chris Coyier (@chriscoyier) on CodePen.

Te invito a seguir a Risi.cl
en Facebook y/o Instagram

DEJA UN COMENTARIO