As Recomendações do W3C para as CSS2 lançadas em 18 de maio de 1998 em sua seção 16.3.2 já previam a propriedade text-shadow destinada a obter um efeito de sombreamento em textos. Esta funcionalidade não foi implementada em nenhum navegador e aos autores que desejarem o efeito de textos sombreados em seus documentos não resta alternativa outra que não substituir o texto por uma imagem. Já é possível notar sinais de uma movimentação efetiva no sentido de acelerar os estudos para efetivar as CSS3 como uma Recomendação oficial do W3C. É certo que há muito trabalho pela frente, contudo alguns módulos das CSS3, embora ainda em fase de rascunho de trabalho, já começam a ser implementados em alguns navegadores, proporcionando à comunidade um meio de testar as novas propriedades e opinar sobre elas.
(texto retirado de: Site do Maujor)
A maioria dos navegadores já oferece suporte para o text-shadow, mas temos de lembrar que o nosso saudoso IeCa não segue nenhum “grupo”, mas se você ler alguns posts anteriores, no post:
CSS3 – Border Radius – Cantos Arredondados, sem imagens, funcionando no Internet Explorer
verá que como sempre há alguns kbs que nos salvam nesta hora.
Como Funciona:
A propriedade text-shadow deverá ser usda da seguinte forma:
seletor {
text-shadow: medida-1 medida-2 medida-3 cor;
}
Detalhes:
medida-1: é o deslocamento que a sombra terá para a direita se o valor usado for positivo, ou para a esquerda se o valor usado for negativo.
medida-2: é o deslocamento que a sombra terá para baixo se o valor usado for positivo, ou para cima se o valor usado for negativo.
medida-3: é o raio da sombra, como no photoshop o efeito blur.
cor: é a cor que a sombra terá.
Os valores de medida-1 e medida-2 são obrigatórios.
Os valores de medida-3 e cor não são obrigatórios, sendo que se não atribuido o valor de medida-3 a sombra não terá o efeito blur e se a cor não for definida a sombra incorporará a cor definida para o texto.
Exemplo:
<div id=”texto”> Teste de text-shadow </div>
#texto {
text-shadow: 2px 2px 2px #FFF;
}
este código irá resultar no texto abaixo
Usando isso você pode tranquilamente usar várias sombras em um único texto como no exemplo abaixo
#texto {
text-shadow: 2px 2px 2px #333, 2px 2px 2px #FC0, 2px 2px 2px #C00;
}
Usando isso sinta-se a vontade para criar.!