10 de dezembro de 2011

2

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. 

2 Comentários:

Valdemir Santos Pedrozo disse... [Responder Comentário]

Fica mesmo mais bonito com este efeito CSS3
fica com aspecto mais profissional, gostei obrigado.

Bruna T. Marques disse... [Responder Comentário]

@Valdemir Santos Pedrozo, obrigada pelo comentário. Realmente esse efeito em CSS3, dá um "toque" mais elegante ao blog.

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

Licença Creative Commons
Free Page Rank Tool