Text-shadow - estilizando sombras nos textos com CSS

Um efeito simples e ao mesmo tempo bem eficiente para sofisticar o site é o text-shadow, ou seja, texto com sombreamento, aplicável em CSS.

Vamos direto a um exemplo, para entendermos a sintaxe básica.
No CSS escrevemos assim: a classe .item vai ter cor da fonte branca (color: white) e um sombreamento com afastamento horizontal de 0.1em e afastamento vertical de 0.2em, na cor amarelo (yellow):

.item {
   color: white;

   text-shadow: 0.1em 0.2em yellow;

}

Daí, no corpo da página (body), usamos a classe num título:

<h2 class="item">Texto com sombreamento</h2>

O resultado será esse:

Texto com sombreamento

Você pode alterar o posicionamento como quiser, aumentando os valores das propriedades das coordenadas X (horizontal) e Y (vertical), além de alterar a cor. Por exemplo, você pode querer que a sombra fique à esquerda do texto. Nesse caso, o valor da coordenada X deve ser negativo. Vamos ver como fica? Mas, além disso, vamos acrescentar mais um valor numérico à sintaxe, nesse caso, especificando a densidade da sombra. Quando menor o valor, mais denso; quanto maior o valor, mais desfocado (o famoso efeito blur). Vejamos:
No CSS, estilizamos a classe .item2 com a cor da fonte alaranjada (#F90) e um sombreamento posicionado no eixo X em -0.1em (um pouquinho à esquerda), no eixo Y com 0.1em (um pouquinho abaixo), com um blur de 0.2em com sombra em tom azul (#00F):

.item2 {
   color: #F90;

   text-shadow: -0.1em 0.1em 0.2em #00F;

}

Em seguida, aplicamos a classe em um título (h2) no corpo da página:

<h2 class="item2">Sombreamento desfocado</h2>

O resultado será esse:

Sombreamento desfocado

O efeito text-shadow permite aplicar mais de um sombreamento num mesmo elemento, com isso nós podemos criar umas aplicações muito bacanas, por exemplo, criando a ilusão de alto relevo e baixo relevo.
O alto relevo pode ser feito assim:

Exemplo de baixo relevo

Para chegarmos ao resultado acima, precisamos estilizar a cor da fonte com o mesmo valor do fundo da página e criarmos então dois sombreamentos, sendo um mais escuro (para a parte superior) e um levemente mais claro (parte inferior do texto) em tons aproximados ao fundo da página. No nosso caso, (que usamos um fundo de avermelhado para vinho), os valores são esses:

.item3 {
   color: #311523;

   text-shadow: 1px 1px #50233A, -1px -1px black;

}

Note que agora nós usamos os valores em Pixel ao invés de EM, que usamos nos exemplos anteriores (Saiba mais sobre esses tipos de valores clicando aqui).
Veja que na linha do text-shadow, há dois sombreamentos configurados, separados por uma vírgula. No primeiro, o da parte inferior, tem valores positivos (1px tanto para o eixo X quanto para o Y) e uma cor clara (#50233A). Depois da vírgula vem o segundo, com valores negativos (-1px) na cor preta.
Daí, então, aplicamos a classe item3 em um título (h1, para ficar maior) no corpo da página:

<h1 class="item3">Sombreamento desfocado</h1>

Agora, vamos para o .item4, que terá a ilusão de um texto em alto relevo, criado pela dupla camada de sombreamento, dessa vez, invertendo os valores negativos e positivos do posicionamento dos eixos X e Y.
O código é esse:

.item4 {
   color: #311523;

   text-shadow: -1px -1px #50233A, 1px 1px black;

}

E o resultado será assim:

Ilusão de alto relevo

Quer mais?

Mantendo a fonte com a mesma cor do fundo da página (dando a ilusão de fonte transparente) e criando dois sombreamentos (a primeira para a parte inferior e à direita do texto; a segunda para a parte superior e à esquerda do texto) ambas de um cor só, nós criamos um modelo de fonte contornada. Veja o resultado:

Fonte apenas contornada

Para o exemplo acima, nós estilizamos da seguinte forma no CSS:

.item5 {
   color: #311523;

   text-shadow: -1px -1px white, 1px 1px white;

}

De maneira parecida, você pode usar o contorno sobre uma fonte colorida. Por exemplo, como no item abaixo:

Fonte colorida e contornada

Para o título assim, usamos o .item6 estilizado com uma fonte na cor azul e agora com quatro camadas de text-shadow, para dar uma espessura maior à sombra, que recebeu a cor laranja. Veja o código dessa classe:

.item6 {
   color: blue;

   text-shadow: -2px 0 orange,
                0 -2px orange,
                2px 0 orange,
                0 2px orange;

}

E tem mais!
Para finalizar, o .item7 vai ser estilizado assim:

.item7 {
   color: orange;

   text-shadow: 0 0 1em red;

}

Veja que nós colorimos a fonte em laranja e aplicamos uma só camada de sombreamento, na cor vermelha, sem distanciamento (nem no eixo X, nem no Y), aplicando um desfocamento de 1em.
Veja só como fica:

Texto brilhoso

Dê uma olhada também nesses modelos de sombreamento.
Bem, agora é com você. Use sua criatividade e deixe seu site mais sofisticado aplicando o efeito text-shadow em CSS. Ele fica bacana especialmente em títulos e subtítulos, além de textos quaisquer que precisem de um contraste em relação ao background da página.