Criando efeitos de sombras em textos

Publicado em: 07/11/2003

Desatualizado. Ver uma versão atualizada deste tutorial

Introdução

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>
</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>

Efeito #4

As regras de estilo

div.texto4 {
width:100%;
position:absolute;
top:6px;
left:6px;
color:#f00;
font: 110% "arial black", Helvetica, sans-serif;
}

div.sombra41  {
width:100%;
position:absolute;
top:6px;
left:6px;
color:#ffa2a2;
font: 105% "arial black", Helvetica, sans-serif;
}

div.sombra42  {
position:relative;
color:#ffe8e8;
font: 25px "arial black", Helvetica, sans-serif;
}

O HTML

<div class="sombra42">TEXTOS COM SOMBRAS
<div class="sombra41">TEXTOS COM SOMBRAS
<div class="texto4">TEXTOS COM SOMBRAS
</div>
</div>
</div>

Ler outro tutorial sobre efeitos em textos com CSS

Este artigo foi traduzido para o russo. Grato ao Nikolay.