O CSS3 está vindo ai certo, alguns browser já estão implementando algumas coisas legais que irão nos livrar de muitos “POGs” que somos obrigados a fazer e poupar bastante trabalho.

Hoje gostaria de apresentar a propriedade text-shadow que é simplesmente a sombra do texto, e já esta disponível para a maior parte dos navegadores.

seletor{
    text-shadow: medida1 medida2 medida3 cor;
}

Onde:

  • Medida 1: é o deslocamento a direita(com valores negativos a sobra irá para esquerda).
  • Medida 2: é o deslocamento para baixo(com valores negativos a sombra irá para cima).
  • Medida 3: é o raio para o efeito de blur na sombra.
  • Cor: é a cor da sombra.

Para ficar mais claro veja o exemplo das propriedade text-shadow.

Se você não está utilizando um navegador com suporte a propriedade veja abaixo como deve ser mostrado.

CSS3 - text-shadow 1

Um recurso que também é interessante é a possibilidade de colocar várias sombras em um texto apenas adicionando mais valores separados por virgula.

seletor{
    text-shadow: 10px -10px #CCC, 20px -20px #F00, 30px -30px #00F; 
}

Deve ser visualizada assim:

CSS3 - text-shadow 2

-> Baseado no artigo do Maujor(http://imasters.com.br/artigo/7469/css/css3_sombras_em_textos/)