25/10/2012

2 Tutorial , Bordas Arredondadas Nas Imagens do Post



Oi Oi Oi Pessoal  , trazendo aqui mais um post [ o ultimo eu acho :s] , Agora é o Primeiro tutorial do dia né e é dois em um ééé , já engordei demais comendo doces , bom o tutorial é muito fácil de fazer , como colocar bordas arredondadas nas imagens do post e o outro é quando passamos o mouse em cima da imagem ela fica com bordas siga passo a passo e seja feliz >>

                              Resultado: 


OBS : Efeito Preto e Branco Não estar Nesse tutorial ;



Imagens Do post ficaram automaticamente com bordas arredondadas : 

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

/* Posts

Vai estar assim:

/* Posts
----------------------------------------------- */

2-Abaixo disso, cole:

.post img {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

3 – Mude 20px pelo tamanho da borda que quiser

4 -Visualize, se estiver tudo certo, salve, 


e Tem Outro que é quando Passamos o mouse encima da imagem e ela fica com bordas : 


Vá no html do seu blog e procure por: 

]]></b:skin> 
Quando achar cole o código abaixo em cima do tag: 
Efeito by Na não tire os créditos.main img {-moz-border-radius: 03px;-webkit-border-radius: 0px 30px 0px 30px; */ Bordas arredondadas */-webkit-transition-duration: .70s; */ Efeito fade */}.main img:hover {-moz-border-radius: 03px;-webkit-border-radius: 30px 50px 30px 50px; */ Bordas arredondadas hover */-webkit-transition-duration: .70s; */ Efeito fade */}Fim do efeito by Na não retire os créditos 
Créditos - http://blog-stupidgirls.blogspot.com.br 

Um comentário: