p ( text-shadow: 1px 1px 1px #000; )Você pode aplicar várias sombras de texto separando por vírgula
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Os primeiros dois valores especificam o comprimento do deslocamento da sombra. O primeiro valor especifica a distância horizontal e o segundo especifica a distância vertical da sombra. O terceiro valor especifica o raio do desfoque e o último valor descreve a cor da sombra:
1. valor = coordenada X
2. valor = coordenada Y
3. valor = raio do desfoque
4. valor = cor da sombra
Usar números positivos como os primeiros dois valores acaba colocando a sombra à direita do texto horizontalmente (primeiro valor) e colocando a sombra abaixo do texto verticalmente (segundo valor).
O terceiro valor, o raio de desfoque, é um valor opcional que pode ser especificado, mas não é obrigatório. É a quantidade de pixels que o texto é esticado que causa um efeito de desfoque. Se você não usar o terceiro valor, ele será tratado como se você especificasse um raio de desfoque de zero.
Além disso, lembre-se de que você pode usar valores RGBa ou HSLa para a cor, por exemplo, uma transparência de 40% do branco:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Exemplos
Veja os exemplos de sombra de texto complexo de caneta por Chris Coyier (@chriscoyier) no CodePen.
Mais Informações
- MDN Docs
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | nenhum | nenhum |