• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

17 de setembro de 2012

Borda Hover Nas Imagens Do Blog

Olá gente, continuando com a maratona de tutoriais, trouxe agora como colocar efeito de borda hover nas imagens do blog, exemplo:
quando passa o mouse:
{ignorem o efeito opacity, só muda as bordas mesmo}
esse efeito fica em todos tipos de imagens inclusive imagens de afiliados e as de posts, é legal né?!

Vamos continuar lendo para aprender?

 Vá em Modelo -> Editar HTML -> Prosseguir -> Aperte Ctrl + F (Nova interface do blogger)



ou
Design -> Editar HTML -> Aperte Ctrl + F ( Antiga interface)

Procure por ]]></b:skin>
Ao encontrar cole esse código em cima:
.borda{-webkit-border-radius: 25px;


-webkit-border-top-right-radius: 1px;

-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 25px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 25px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
-webkit-transition-duration: .90s;
}
.borda:hover {-webkit-border-radius: 1px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius: 1px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
border-radius: 1px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
-webkit-transition-duration: .90s;
}
 Para usar a imagem com o efeito:
<img src="URL DA IMAGEM AQUI" class="borda" />
Beijos, espero que tenham entendido o tutorial *w*

6 comentários: