Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

2/10/2013

Borda na Imagem + Efeito preto e branco

Bom como todo mundo quer bora ensinar , esse código eu peguei do tema base da Ana Carolina {clica} então desde já créditos totalmente a ela.

Primeiro vá em Modelo > Editar Html e cole esse código antes do ]]></b:skin>
.post img{
box-shadow: 0px 0px 3px #000000;
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background: url(http://static.tumblr.com/um2zssm/kftmh7jo5/pack-backgrounds_cherry_bomb_31.gif);
background-position: top left;
padding: 10px;
border: 1px solid #9F8C76;
}
.post img:hover{
-webkit-filter: grayscale(100%);z-index: -99px;
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background-position: bottom right;
}
e se você quiser retirar o efeito preto branco apague essa pate do código

-webkit-filter: grayscale(100%);z-index: -99px;

Mude as cores de acordo com teu gosto, visualize vê se deu tudo certo e salve.

Nenhum comentário:

Postar um comentário

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.