:: Criando efeitos de sombras em textos ::
Este tutorial foi criado em 10 de janeiro de 2005 para substituir o tutorial anterior de 07 de novembro de 2003 que apresentava algumas inconsistências. Aqui mostro uma técnica usando posicionamento para simular efeitos de sombra em textos. Mantive o tutorial anterior no site. Se você precisar consultar, veja o tutorial anterior. Mas aconselho o uso da técnica aqui mostrada.
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 {
position:absolute;
top:3px;
left:-3px;
color:#039;
font: 25px "arial black", Helvetica, sans-serif;
}
div.sombra21 {
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 {
position:absolute;
top:3px;
left:3px;
color:#360;
font: 25px "arial black", Helvetica, sans-serif;
}
div.sombra31 {
position:absolute;
top:3px;
left:3px;
color:#6b9046;
font: 25px "arial black", Helvetica, sans-serif;
}
div.sombra32 {
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 {
position:absolute;
top:6px;
left:6px;
color:#f00;
font: 110% "arial black", Helvetica, sans-serif;
}
div.sombra41 {
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.
Última modificação: 2008/10/30 10:52:10 GMT
Versão antiga criada em: 2003-11-07
Atualizado em: 2005-08-30
