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:
Pingback: CSS3: propriedade box-shadow | bittersweet dev
Pena que a maioria de visitas aos sites são do maldito IE6.
Vários sites ficam com a aparência feia e cortada com a visão do IE6, para mim os melhores são o Google Chrome e o Firefox.
A Microsoft devia atualizar o IE para ter posse dos “poderes” dos outros navegadores, e esse “poder” é muito importante.
Gabriel, na verdade, por incrível que pareça, a Microsoft está trabalhando em cima das correções do IE. As novas versões estão melhorando muito nos quesitos relacionados a padrões web. O preview do IE9 já atingiu uma boa porcentagem de correções (nos padrões da Microsoft, claro). Já está mais do que na hora de os browsers seguirem o mesmo rumo, cada um com seus add-ons, extensões, features, mas em cima de um core comum.
Num rola no IE 9.
Exato, esse recurso não está implementado ainda no IE 9. A tabela de recursos suportados no IE separado por versão se encontra aqui http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx