p ( text-shadow: 1px 1px 1px #000; )Puede aplicar varias sombras de texto separando por comas
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 o HSLa para el color, por ejemplo, un 40% de transparencia de blanco:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Ejemplos
Vea los ejemplos de sombras de texto complejas de lápiz de Chris Coyier (@chriscoyier) en CodePen.
Más información
- Documentos de MDN
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | alguna | alguna |