TEXTO COM SOMBRAS

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.

Efeito #1

TEXTOS COM SOMBRAS

o estilo em css

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;
}

e 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;
}

e o HTML

<div class="sombra22">TEXTOS COM SOMBRAS
<div class="sombra21">TEXTOS COM SOMBRAS
<div class="texto2">TEXTOS COM SOMBRAS
</div>
</div>
</div>


Efeito #2

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS