quarta-feira, 18 de dezembro de 2013

Tutorial: Como por sombra nos títulos dos posts

Um recurso CSS muito legal e pouco conhecido e usado pelas blogueiras teens é o text shadow, que nada mais é do que um sombreado que pode ser aplicadao nos textos, dando um efeito muito bonito. Alguns blogs usam esse recurso nos títulos dos posts, veja o exemplo em "  Leia Mais "




O código usado para dar esse efeito é esse:
text-shadow: 1px 2px 3px #6a6a6a;
As partes em rosa e azul são equivalentes á distância do sombreado em relação ao texto. A parte em amarelo é o tamanho do esfumaçado da sombra. E o código em verde é a cor da sombra.
Você pode ir alterando esses valores para obter diferentes efeitos de sombra. Para aplicar esse efeito no titulo dos posts, siga os passos abaixo:
1 – Abra o blogger, clique em design > Editar HTML

2 – Aperte Ctrl+F e procure por: post-title

3 – Você deverá achar um código parcecido com esse:

h3.post-title, h4 { 
  font: $(post.title.font); 
  color: $(post.title.text.color);

}

4 – cole abaixo da linha:

#h3.post-title, h4 {
O código da sombra que eu coloquei no começo do post. Seu código deve ficar assim:

h3.post-title, h4 { 
  font: $(post.title.font); 
  color: $(post.title.text.color); 
text-shadow: 1px 2px 3px #6a6a6a; 
}

5 – Visualize e salve. Você irá conseguir um efeito como abaixo:
image
Você pode alterar os valores e a cor da sombra para conseguir outros efeitos:

image image

Espero que tenham gostado!   

Créditos:

Um comentário: