Banner propaganda da DevMedia - Cursos de desenvolvimento web

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

TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS

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

TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS

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

TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS

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

TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS
TEXTOS COM SOMBRAS

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo