18/11/2012

Como colocar bordas nas imagens


'O tempo é muito lento para os que esperam, muito rápido para os que tem medo, muito longo para os que lamentam, muito curto para os que festejam mas, para os que amam, o tempo é eterno.' - William Shakespeare
O tempo não está passado muito rápido? Mesmo ontem era Setembro... Bem seja como for, hoje é um tutorial dedicado as imagens... Quer colocar bordas da imagens? Bem, na minha opinião fica muito bonito num blog e é uma das coisas que um blog tem obrigatoriamente de ter! É um tutorial muito simples... Quer saber como?

Então vai ficar assim: É só passar o mouse em cima e muda!

1. Vai em Design> Editar HTML.
2. Tecla Ctrl + F ou F3 e procura por a tag:
]]></b:skin>
3. Em cima dessa tag, coloque o código:
.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 0px 30px 0px; 
*/ Bordas arredondadas hover */
-webkit-transition-duration: .70s; 
*/ Efeito fade */
}
4. Se quiseres podes editar o código de acordo ao teu gosto! 
Créditos para: winxfyrezone 

Sem comentários:

Enviar um comentário