18/05/2013

Tutorial: Bordas arredondadas nas imagens do Blog.

Boa noite :D 
Faz um tempo que eu não trago tutorial né? Ninguém me pedia também, mas pediram dessa vez para trazerem um tutorial de como colocar bordas arredondadas nas imagens do blog.
Bom tem dois jeitos, um dos jeitos é deixar as bordas arredondadas permanente e outra é fazer com que as bordas fiquem arrendondadas toda vez que passa o mouse em cima da foto, eu vou explicar os dois jeitos, o tutorial é bem simples! Dou créditos ao Princesa Mimada.  Quer aprender?! Clica ai. 


1º Passo:  Vá em Modelo - Editar HTML e procure por:

]]></b:skin> 

Esse é pra deixar a borda definitivamente arredondada.
2º Passo: Em cima da tag que você procurou cole: 

.post img {
-moz-border-radius: 10px;
-webkit-boder-radius: 10px;
border-radius: 10px;

Esse é pra deixar arredondada só quando passar o mouse em cima da foto. Em cima de  ]]></b:skin> mesmo, você cola:

.main img {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}
.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
}

Lembrando que você só pode colar um dos dois códigos, e não precisa mudar nada! 
Espero que consigam, até mais! 

2 comentários: