Como colocar sombra no texto

Conheço a propriedade text-shadow desde que me entendo por aprendiz de CSS, mas só agora o seu uso é viável por estar funcionando bem nos navegadores modernos que buscam ser fiéis aos padrões W3C.

Apesar de ainda não funcionar no Internet Explorer, os usuários dos navegadores Chrome, Firefox, Opera e Safari já se beneficiam desse recurso, que é cada vez mais utilizado em webdesign.

h1 {text-shadow:#000000 1px 2px 0px;}

Na propriedade text-shadow a ordem dos valores é a seguinte:

• #000000 - A cor da sombra
• 1px - A distância horizontal (X) entre o texto e a sombra
• 2px - A distância vertical (Y) entre o texto e a sombra
• 0px - Efeito blur (borrado)

Para as distâncias, assim como nas coordenadas geométricas, valores positivos são contados para a direita (X) ou para cima (Y) e valores negativos para a esquerda (X) ou para baixo (Y).

Seguem alguns exemplos de aplicações de text-shadow. Ao lado direito coloquei como fica o mesmo texto em um navegador que não suporta essa propriedade, o que atualmente é o caso do Internet Explorer e do Flock.

1º modelo

"Eu só faço isto porque eu estou me divertindo. No dia em que eu deixar de me divertir, eu pularei fora." Heath Ledger

"Eu só faço isto porque eu estou me divertindo. No dia em que eu deixar de me divertir, eu pularei fora." Heath Ledger

<div style="background:#fff; color: #690; text-shadow: #000 1px 1px 0px;">Texto aqui.</div>

2º modelo

"Estão todos satisfeitos com o sucesso do desastre: vai passar na televisão." Renato Russo

"Estão todos satisfeitos com o sucesso do desastre: vai passar na televisão." Renato Russo

<div style="background:#000000; color:#00bfff; text-shadow: #00f 1px 1px 0px;">Texto aqui.</div>

3º modelo

“Havia no ar um cheiro de curry, de fritura barata e desinfetante. Um cheiro de gente demais com dinheiro de menos, encafuada num espaço demasiado pequeno.” John le Carré

“Havia no ar um cheiro de curry, de fritura barata e desinfetante. Um cheiro de gente demais com dinheiro de menos, encafuada num espaço demasiado pequeno.” John le Carré

<div style="background:#ccc; color: #000; text-shadow: #fff 1px 1px 0px;">Texto aqui.<div>

4º modelo

“Televisão é tudo de mentira. Se o programa não estiver bom, finja que está. Pule, grite, assim você vai aparecer na telinha e ficar famoso.” Luciano Huck

“Televisão é tudo de mentira. Se o programa não estiver bom, finja que está. Pule, grite, assim você vai aparecer na telinha e ficar famoso.” Luciano Huck

<div style="background:#daa520; color: #000; text-shadow: #ff0 -1px -1px 2px;">Texto aqui.</div>

5º modelo

"A chave de todas as ciências é inegavelmente o ponto de interrogação". Honoré de Balzac

"A chave de todas as ciências é inegavelmente o ponto de interrogação". Honoré de Balzac

<div style='background:#ff6347; color: #000; text-shadow: #fa9 1px 1px 0px;'>Texto aqui.</div>

6º modelo

“Eu nunca quis cantar. Eu só queria ficar tocando a guitarra no fundo do palco.” Kurt Cobain

“Eu nunca quis cantar. Eu só queria ficar tocando a guitarra no fundo do palco.” Kurt Cobain

<div style="background:#000; color: #690; text-shadow: #666 -1px -1px 0px;">Texto aqui.</div>

Exemplo de aplicação nos cabeçalhos:

h1 {background:#000; color: #690; text-shadow: #666 -1px -1px 0px;}
h2 {background:#ff6347; color: #000; text-shadow: #fa9 1px 1px 0px;}
h3 {background:#daa520; color: #000; text-shadow: #ff0 -1px -1px 2px;}
]]></b:skin>

Até mais!

Fontes: Quircks Mode e Wikiquote