17 de abr de 2012

Efeito Borda nas Imagens


Hooy, babys! Hoje vim trazer um tutorial super bacana, que vai deixar seu bloguinho cutie . É um efeito com bordas redondas, ele ficará desse jeito  [www]. Antes que eu esqueça, o código eu peguei deste site, entoon o créditos é todinho dela !

Let's go:

-Para adicionar o efeito em todas as imagens: 


http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Vá para a área de edição do HTML do seu blog;
http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Dê um CTRL+F e procure por ]]></b:skin>

Acima dele, cole o código abaixo:




.post-body img {
border-radius: 45% / 20%; /* Borda arredondada */
box-shadow: 0px 0px 15px #f5abe5; /* Cor da Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Eliminar borda arredondada */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}



http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Visualize antes de salvar.

-Para usar apenas na imagem que vc quiser:

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Adicione o código anterior acima de ]]></b:skin>
http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif no código  Troque .post-body img por .arredondado, e .post-body img:hover por.arredondado:hover
http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Quando for postar, clique em Editar HTML e cole este código:



<imgclass="arredondado" src="URL da imagem"/>



http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif No lugar de "URL da imagem", coloque a imagem que irá postar
 http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Visualize, se estiver ok, publique seu post !


Eu tentei colocar esse efeito no HTML do blog, mas não sei porque NÃO deu certo . Tentei instalar várias vezes, verifiquei se o código estava errado, mas estava tudo certinho e NADA. Fiquei tristi #mimimi ... Mas espero que tenham dado certo no blog de vocês ! 


Um grande beijo 

Nenhum comentário: