Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos CSS Vanessa S.

Efeito Sombra nos Textos (Text-shadow)

A propriedade text-shadow nos permite criar sombras no texto, variando a posição e a cor da sombra.
O uso deste efeito é viável por estar funcionando em navegadores modernos, que aceitam os padrões de W3C.

A aplicação deste efeito em titulos e cabeçalhos é bem comum, e é o mesmo efeito que eu apliquei aos títulos dos posts, aqui no blog.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Safari, Chrome e Opera.

Para o Internet Explorer existe um filtro que faz algo semelhante.
Exemplos:


filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);}
filter:progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5); }

A propriedade text-shadow é muito simples e possui quatro parâmetros:
text-shadow: PositionX >> PositionY>> Efeito Blur>> Escala de cores.


seletor {text-shadow:2px 3px 8px #000;}

2px -> é a distância horizontal (X)
3px -> é a distância vertical (Y)
8px -> é o efeito Blur (efeito borrado)
#000 -> é a cor da Sombra

1. Aplicar o efeito diretamente no post:

Segue alguns exemplos para aplicação em textos e abaixo de cada exemplo o código referente.

Sombra Text-Shadow

 

<div style="background:#E6E6FA; color:#4682B4; text-shadow: 1px 1px 0px #000;">Texto Aqui</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

text-shadow: 1px 1px 0px #000;
Sombra Text-Shadow

 

<div style="padding:10px;background:#2E8B57; color:#000; text-shadow:-1px -1px 2px #ff0;">Texto Aqui</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

text-shadow:-1px -1px 2px #ff0;

 

Sombra Text-Shadow

 

<div style="background:#fff; color:#000; text-shadow:5px 5px 5px 000;">Texto Aqui</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

text-shadow:5px 5px 5px 000;

 

Sombra Text-Shadow

 

<div style="text-shadow: 5px 5px 5px #333; color:#ffffff;">Texto Aqui</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

text-shadow: 1px 1px 2px #333; color:#ffffff;

 

Sombra Text-Shadow

 

<div style="padding:5px;background:#bbb3ab; color:#412510;text-shadow:1px 1px 0px #fff;">Texto Aqui</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

text-shadow:1px 1px 0px #fff;

 

Sombra Text-Shadow

 

<div style="padding:5px;background:#bbb3ab; color:#000;text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;">Texto Aqui</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;

 

Para aplicar o efeito em textos no post basta colar o código referente à propriedade, no corpo da postagem, através da aba “editar html”.
(Edite distância e cores da sombra)

Faça testes e brinque com os efeitos e cores que você pode aplicar.

 

2. Aplicar o efeito no CSS do template:

Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada somente aos elementos que você desejar, como por exemplo, substitulos nos posts.

1º passo – Vá em “modelo >> Editar HTML >> Expandir modelos de widgets”.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>


.sombra-text {
text-shadow: 2px 3px 4px #000; /*--- Edite  ---*/
color: # F0C2D1;  /*--- Edite cor ---*/
font-size: 30px;  /*--- Edite tamanho da fonte ---*/
}

2º passo – Sempre que quiser aplicar o efeito sombra em alguma parte do texto, ou substitulos, no modo “Editar HTML” da postagem, acrescente a seguinte linha:


<p class="sombra-text">
Texto Aqui
</p>

 

3. Aplicar o efeito sombra nos Títulos dos Posts:

Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:


text-shadow: 2px 3px 4px #000; /*--- Edite  ---*/

3. Aplicar o efeito sombra nos Títulos do Blog (cabeçalho):

Você também pode acrescentar este efeito no Título do Blog (cabeçalho), basta acrescentar a linha da propriedade text-shadow em #header h1

Você também pode aplicar este efeito aos títulos da sidebar, basta acrescentar o código do efeito text-shadow em:
.sidebar h2

Se quiser acrescentar o efeito aos titulos do Footer, acrescente em:
#footer h2

Como eu disse anteriormente, faça testes e brinque com os efeitos e cores que você pode aplicar.

Se quiser que o Internet Explorer reconheça o efeito sombra no texto, você deverá acrescentar o filtro disponivel no início da postagem, editando os campos: color, direction e strength, de acordo com seu gosto.

Imagem:Ajaxian

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

5 Comentários

  1. DG-Dicas Games disse:

    Muito bom esse tuto

  2. ?a? disse:

    Deu tudo certinho!
    Adooooro quando acontece isso! rsrs
    Beijo no coração, Clau!
    Dani

  3. Lucas Hb disse:

    clau,me ajuda por favor? eu não compreendi a etapa 3 aplicar no tìtulo dos posts,o que eu coloco em edite?

  4. Das disse:

    Oi, Clau!
    Saudades de vc, amiga!
    Ahh demorou, mas estou de volta e em tempo integral! rsrsrs
    Adorei as novidades! Ah? Não são tão novas assim? Nossa, então faz tempo que não apareço, né? rsrs
    Aos poucos, vou recuperar o tempo perdido, viu?

    Um beijo grande no coração!
    dani

  5. @adrianaarndt disse:

    Poxa, você é um anjo! Eu conhecia apenas metade desses comandos. Sei que é um tutorial para todos mas agradeço de maneira muito especial por que cheguei a pedi-lo. Assim que eu conseguir terminar meu layout e abrir o blog pode ter certeza de que lá estarão os devidos créditos!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.