filmetub: Imagens nas Postagens com Efeito CSS3

sábado, 10 de dezembro de 2011

Imagens nas Postagens com Efeito CSS3

Olá Pessoal, hoje iremos aprender a como colocar um efeito de CSS3 nas postagens do seu Blog. Esse efeito dá um aspecto bem elegante ao seu blog, pois ao passarmos o mouse em cima das imagens surge o efeito CSS3, e sempre possuirá uma sombra nas bordas das imagens.
Veja o demo: http://demo3ub.blogspot.com (Imagem das postagem).

Vamos ao tutorial:
1º - Acesse o painel de seu blog e clique na guia modelo.
2º - Agora clique no botão Editar HTML.
3º - Em seguida pressione as teclas CTRL+F e procure por:
]]></b:skin>
4º - E ACIMA dele cole o seguinte código:
 .post-body img {opacity:1 !important;-webkit-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;-moz-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;}.post-body img:hover {padding: 6px !important;background: transparent !important;-webkit-transition: all 0.8s linear !important;border: 1px solid #C8C6C6 !important;-webkit-border-radius: 8px !important;-moz-border-radius: 8px !important;border-radius: 8px !important;transition: all 0.3s ease !important;-webkit-transition: all 0.8s ease !important;-o-transition: all 0.8s ease !important;-moz-transition: all 0.8s ease !important;opacity:0.5 !important;}
5º - Clique em Salvar Modelo. 

Nenhum comentário:

Postar um comentário