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  exemplo:

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! Kissus

sing-liah

25 comentários

  1. Que lindoo esse efeito!!! Amo esse blog! Ah e tem um selinho pra vc lá no meu blog! Nesse link aí! :)

    http://blahblahblahpop.blogspot.com/2011/03/ganhei-um-selinho-e-os-ganhadores-sao.html

    Ah e tem um sorteio! Participe! :)

    ResponderExcluir
  2. Ficou Super legal essa dica, com esse código além de colocar nos títulos das postagens, também coloquei nos títulos dos Gadgets. Parabéns ! :D

    http://maariihsouza.blogspot.com/

    ResponderExcluir
  3. Dá um efeito bem legal o sombreado no texto, bem simples o tutorial.

    http://www.profanofeminino.blogspot.com/

    ResponderExcluir
  4. NOSSA! Aqui tem tutoriais incriveis.Amei.Parabens

    ResponderExcluir
  5. Adorei este tutorial, estou usando, ficou super lindo.

    Justlarie.blogspot.com visita e segue lá..

    ResponderExcluir
  6. Amei o tutorial <3 ,estou usando beijos ! Comenta ?

    http://theperfectkisses.blogspot.com/2011/03/sessao-pipoca-toy-story.html

    ResponderExcluir
  7. Legal!!!
    http://sobrecarregada.blogspot.com/
    http://justdreams-ana.blogspot.com/

    ResponderExcluir
  8. Nossa ! Muito show o tutorial *--*
    Bastante útil, vou usar no meu próximo design (:
    Beijooooo
    Retribui?
    www.fanaticospornoticia.tk

    ResponderExcluir
  9. amore faz parceria?

    http://roundround15.blogspot.com/p/contatos-e-parcerias.html

    amei o seu blog
    to seguindo segue?

    ResponderExcluir
  10. Oiii Liaah !
    Gostaria de pedir um tutorial de como
    colocar essa letra : Century Gothick(uma coisa assim ) a que vse está no post !
    Ppooooor favor !
    Por que no design, não tem essa letra :s:s:S
    Beiijos
    http://busygirls-blog.blogspot.com

    ResponderExcluir
  11. Adorei a dica!
    mooodafeminina.blogspot.com

    ResponderExcluir
  12. Vlw pela dica 
    Ja estou utilizando o recurso no meu blog
    http://blogdosmartin.blogspot.com

    ResponderExcluir
  13. Amei esse tuto!!! Super útil e já esto usando!

    ResponderExcluir
  14. Eu não consigo nada querida da tudo errado --' porq ? eeu faço td certinho , me enquanto essas letras , feiz foi estragar meu blog : http://stardoll-glamuor-teen.blogspot.com/

    nossa , se arrependimento matasse ...

    ResponderExcluir
  15. Wow! Amei seu blog. Cara, tbm sou evangélica e incompreendida pela maioria por minhas atitudes serem diferentes dos ñ cristãos ^_^
    Simplesmente amei o tutorial.
    Consegui fazer, ficou massa demais :D

    ResponderExcluir
  16. Adorei, usei nesse blog, não é meu mas estou fazendo o layour :*
    Nathália Duarte

    ResponderExcluir
  17. O meu não tem, ja revirei o EDITAR HTML e não axei S:

    ResponderExcluir
  18. Super fácil e muito lindo!
    little-stylist.blogspot.com

    ResponderExcluir
  19. O meu também ñ tem, vasculhei em tudo que tinha mas não achei a tal parte com o post-title...

    ResponderExcluir
    Respostas
    1. Oi Lariii tudo bem?
      Eu também estava na mesma situação que você.
      Faça o seguinte em vez de procurar por:

      post-title

      Procure por: h3.post-title a {

      Ai vai aparecer o seguinte:(OBS:em baixo disso vc cola o código ta?)

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

      Excluir
  20. consegui com o modo CSS :D

    ResponderExcluir
  21. Meu blog ta ficando perfect com os macetes que arranjo ^^

    ResponderExcluir
  22. Muito interessante!
    http://docebunny.blogspot.com.br/

    ResponderExcluir