sexta-feira, 5 de outubro de 2012

Tutorial: Como fazer borda redonda nas imagens do blog




Oi fadinhas brilhantes, hoje resolvi aproveitar que estou com bastante tempo para o blog e postar um tutorial simples que peguei do blog Cherry Copcaskull, é um efeito que bastante gente cobheçe por alguns blogs.

O efeito é passar o mouse pela imagen e ela ficar arredondada, eu só não coloquei no novo Layout do blog porque achei que não ficaria legal no blog (talvez no próximo Layout).

Tutorial:

  • Va em HTML no seu blog (mais tarde vou ensinar a como achar o HTML no novo blogger)
  • Clique em  Exapandir modelos de Widgets e clique em Ctrl+3 ou F3
  • Na caixa de pesquisa procure por  ]]><b:skin>.
  • Depois cole este coódigo Acima dele
 .post img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
}
.post img:hover {
-webkit-transition-duration: .50s;
border-radius: 200px 200px 200px 200px;
}

  • Clique em Salvar e pronto.

2 comentários: