bittersweet dev

Quem nunca recebeu aquele layout finalizado, com um título sombreado e silenciosamente pensou: “P*** ****, lá vou eu fazer um text-replacement novamente”. Essa atitude era comum entre os webdevelopers, mas finalmente o pessoal da W3C veio solucionar nossos problemas.

Definição

O text-shadow pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceito pela grande maioria dos browsers modernos: Firefox 3.5, Opera 9.5+, Safari 3+. Infelizmente, mesmo com todas as melhorias (e realmente foram muitas) no Internet Explorer 7 e mais ainda no Internet Explorer 8, eles ainda não suportam essa propriedade, ou seja, escolheram a pílula azul.

A propriedade text-shadow é usada da seguinte maneira:

text-shadow: 2px 2px 2px #00f;

Onde:

• os dois primeiros valores são as coordenadas top left, para onde a sombra será projetada;
• o terceiro valor é o blur da sombra;
• o quarto valor é a cor da sombra;

A propriedade também aceita multiplas sombras. Sim! Até degradê é possível de se implementar usando somente CSS. Para isso, é só separar a declaração das sombras usando vírgulas:

text-shadow: 2px 2px 2px #000, 4px 4px 2px #00f;

Essa propriedade não é nova. Na verdade ela foi proposta na especificação do CSS2. A definição completa da propriedade pode ser encontrada aqui.

Exemplos

Vamos então implementar então os dois exemplos acima, primeiro a sombra simples:

bittersweet dev – CSS3: Propriedade text-shadow

E também o com sombras multiplas:

bittersweet dev – CSS3: Propriedade text-shadow

Pra quem não viu nada diferente nessas frases dê uma olhada nas imagens abaixo que representam respectivamente os exemplos acima:

… e uma dica, tome a pílula vermelha, ou seja, use um browser decente!

Aguardem novos posts explicando as novas propriedades do CSS3, até lá, deixe seu comentário, dúvida ou critica

text-shadow: 2px 2px 4px #f00;

Leia também:

1. CSS3: propriedade box-shadow