quarta-feira, 4 de janeiro de 2012

tutorial- imagem com borda redonda!

ooi amores ^.^ vocês já viram que o visual do blog mudou, e pra completar eu mudei o estilo das imagens.. e eu quis trazer o tutorial pra vocês também! mas só pra lembrar que eu aprendi a fazer no blog soul collide 

tutorial: 
design > editar HTML
em HTML Procure por ]]></b:skin> ( clicando em ctrl + f )e acima cole o código que está ali em baixo:
(procure não alterar os outros códigos se não estiver com total certeza do que irá fazer..)

post img{ filter:alpha(opacity=60);
-moz-opacity:0.60; opacity:0.60;
-border-radius: 40px 0px 40px 0px;
-moz-border-radius: 40px 0px 40px 0px;
-webkit-border-radius: 40px 0px 40px 0px;
-transition-duration: 1.90s;
-webkit-transition-duration: 1.90s;
-moz-transition-duration: 1.90s; }
.post a:hover img{ filter:alpha(opacity=100);
-moz-opacity:1.0; opacity:1.0;
-border-radius: 0px 40px 0px 40px;
-moz-border-radius: 0px 40px 0px 40px;
-webkit-border-radius: 0px 40px 0px 40px;
-transition-duration: 1.90s;
-webkit-transition-duration: 1.90s;
-moz-transition-duration: 1.90s; }

é isso amores, fácil não? e fica bem fofinho (:

mas se você quiser ao inverso, produre por ]]></b:skin> e acima bote:


.post img{ filter:alpha(opacity=60);
-moz-opacity:0.60; opacity:0.60;
-border-radius: 0px 40px 0px 40px;
-moz-border-radius: 0px 40px 0px 40px;
-webkit-border-radius: 0px 40px 0px 40px;
-transition-duration: 1.90s;
-webkit-transition-duration: 1.90s;
-moz-transition-duration: 1.90s; }
.post a:hover img{ filter:alpha(opacity=100);
-moz-opacity:1.0; opacity:1.0;
-border-radius: 40px 0px 40px 0px;
-moz-border-radius: 40px 0px 40px 0px;
-webkit-border-radius: 40px 0px 40px 0px;
-transition-duration: 1.90s;
-webkit-transition-duration: 1.90s;
-moz-transition-duration: 1.90s; }

é isso gente, comentem!
bejão luh

Nenhum comentário: