[CSS] Efeitos de sombra em texto

Com CSS você pode obter variados efeitos nos textos de sua página. Apresento a seguir alguns exemplos com a finalidade de mostrar as definições básicas para este processo. As possibilidades são ilimitadas, bastando um pouco de criatividade para se obter efeitos bastante interessantes e decorativos.
Para cada efeito apresento o resultado visual final do efeito e logo a seguir a regra CSS para obtê-lo, bem como o XHTML correspondente.
A técnica básica para obtenção do efeito consiste em se fazer uso de posicionamento CSS do texto e da(s) sua(s) sombra(s).
Você terá que ir fazendo experiências com os valores das propriedades top e left até obter o efeito desejado. Considere valores negativos para diferentes deslocamentos da sombra.
Vamos a eles:

Efeito #1

As regras de estilo
div.texto1 {
position:absolute;
top:2px;
left:2px;
color:#f00;
font: bold 25px Georgia, "Times New Roman", Times, serif;
}

div.sombra11 {
position:relative;
color:#ccc;
font: bold 25px Georgia, "Times New Roman", Times, serif;
}

O HTML
<div class="sombra11">TEXTOS COM SOMBRAS <div class="texto1">TEXTOS COM SOMBRAS </div><br></div>

Efeito #2

As regras de estilo
div.texto2 {
width:100%;
position:absolute;
top:3px;
left:-3px;
color:#039;
font: 25px "arial black", Helvetica, sans-serif;
}

div.sombra21 {
width:100%;
position:absolute;
top:3px;
left:-3px;
color:#7490c7;
font: 25px "arial black", Helvetica, sans-serif;
}

div.sombra22 {
position:relative;
color:#b9c7e3;
font: 25px "arial black", Helvetica, sans-serif;
}
O HTML
<div class="sombra22">TEXTOS COM SOMBRAS <div class="sombra21">TEXTOS COM SOMBRAS <div class="texto2">TEXTOS COM SOMBRAS </div> </div> </div>

Efeito #3

As regras de estilo
div.texto3 { width:100%; position:absolute; top:3px; left:3px; color:#360; font: 25px "arial black", Helvetica, sans-serif; } div.sombra31 { width:100%; position:absolute; top:3px; left:3px; color:#6b9046; font: 25px "arial black", Helvetica, sans-serif; } div.sombra32 { width:100%; position:absolute; top:3px; left:3px; color:#a2b98b; font: 25px "arial black", Helvetica, sans-serif; } div.sombra33 { position:relative; color:#c7d5b9; font: 25px "arial black", Helvetica, sans-serif; }
O HTML
<div class="sombra33">TEXTOS COM SOMBRAS <div class="sombra32">TEXTOS COM SOMBRAS <div class="sombra31">TEXTOS COM SOMBRAS <div class="texto3">TEXTOS COM SOMBRAS </div> </div> </div> </div>