Sombra de texto CSS - Trucos CSS

Anonim

Sombra de texto normal:

p ( text-shadow: 1px 1px 1px #000; )

Varias sombras:

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

Los dos primeros valores especifican la longitud del desplazamiento de la 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. valor = la coordenada X
2. valor = la coordenada Y
3. valor = el radio de desenfoque
4. valor = 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 lo que provoca 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 para el color, por ejemplo, un 40% de transparencia de blanco:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )