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

<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

<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é

<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

<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

<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

<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

Páginas

quinta-feira, outubro 15, 2009