Maluko Design©: Texto Sombreado com CSS

Avalie:

Author: ..::Igor::..

Categorias: Dicas

Email

Meu Site: Create Evolution

Add No Twitter

Texto Sombreado com CSS

Descrição: A propriedade text-shadow do CSS 3, permite colocar um sombreado em textos, dando assim mais profundidade e realçando títulos, listas e parágrafos.

Essa propriedade requer quatro informações: deslocamento horizontal, deslocamento vertical, desfoque da sombra e cor do sombreado.

Exemplo: text-shadow: –4px 4px 3px #999999

O primeiro valor coloca o sombreado 4 pixels à esquerda do texto. O segundo valor, coloca o sombreado 4 pixel abaixo do texto. O valor de 3 px define o desfoque e #999999 se refere à cor do sombreado.

Podemos usar a propriedade text-shadow em diversos locais do template, especialmente em títulos. Para encontrar a área referente ao título de cada elemento de página, procure no HTML do template por h1, h2, h3. Exemplos:

Código dos títulos da barra lateral (sidebar):

#sidebar1 h2,#sidebar2 h2,#sidebar3 h2,#sidebar4 h2 {

Código dos títulos dos posts:

.post h3 {

Código do título do rodapé:

#footer h2 {

Para colocar o sombreado, basta adicionar a popriedade text-shadow dentro do CSS do título que você deseja alterar. Vamos usar como exemplo, o título dos posts:

.post h3 {
color:$postTitleColor;
font:$postTitleFont;
text-decoration:none;
text-shadow: –4px 4px 3px #999999
text-align:left;
line-height:1.4em;
border-bottom:2px solid $posttitleBorderColor;
margin:0 0 20px;
padding:0 0 2px;
}

É possível trabalhar com várias sombras; basta separar os valores com uma vírgula:

text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff;

text-shadow: 0 6px 4px #33F, -3px -5px 4px #f00, 3px -5px 4px #0F0

É importante escolher a cor base do título, para combinar com o sombreado:

.post h3 { <—título dos posts-->
color:#ffffff; <—cor do título dos posts-->
font:$postTitleFont;
text-decoration:none;
text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff; <—text-shadow -->

Achou complicado? Experimente usar um gerador de código CSS!

Entre em http://css3generator.com/ e procure por text-shadow no menu. Depois, é só criar e ir visualizando o efeito sombreado ;)