Tutorial - Borda da Imagem Arredondada

13 de ago. de 2013 | | |
eu coloquei esse tutorial, passe o mouse aqui em cima nessa imagem ((:
Hey Guys, tudo bem?? hoje vou começar a postar tutorias no blog, hoje trouxe um tutorial bem legal, como arredondar a borda da sua imagem , mesmo sendo quadrada quando vc postar no blog ela vai ficar arredonda-da , vamos lá?

Vá Em:
DESIGN > MODELO > EDITAR HTML > 

Depois Dê CTRL+F e procure por:

]]></b:skin>

Quando achar, coloque ANTES, este código:

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

E em cima do mesmo código o ]]></b:skin> que procurou cole esse:

*------ IMAGE ANIMATION------*/
img {
filter:alpha(opacity=100);
-webkit-transition-duration:.5s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .6;
-webkit-border-top-right-radius:10;
-webkit-border-top-left-radius:10;
-webkit-border-bottom-right-radius:10;
-webkit-border-bottom-left-radius:10;
}
img:hover {
filter: alpha(opacity=60);
opacity: .60;
border: 0px dotted #000000;
border-radius: 10px;
-moz-border-radius: 10px;
}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;



Comentários

Salve e Visualize se está tudo bem no seu blog, e pronto já vai estar lá, passe o mouse em cima de uma imagem sua do blog e vai estar arredondada, ou nem precisa passar já vai estar arredondada! espero que tenham gostado de tutorial e até a próxima.

#Lhukas

2 comentários: