sexta-feira, 17 de agosto de 2012

Tutorial - Como colocar bordas arredondadas

Nesse tutorial, vou ensinar, como deixar a borda das imagens arredondas, veja alguns exemplos:

Antes:




Depois:


É só ir no Design > Personalizar > Adicionar CSS e colocar esse código:

}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
 background: #FFC0CB; /*Cor da parte fixa, que fica no mundo*/
border: 2px dotted #FF69B4; /*Coloque borda se quiser*/
}
b, strong {color: #FF69B4; text-decoration: none; cursor: normal; }
i {color: #FF69B4; text-decoration: none; cursor: normal; }u, underline {color: #FF69B4; text-decoration: none; border-bottom: 2px dotted #FF69B4; cursor: normal;}.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;
}


Olhe um print, onde está o CSS:


Coloque o código e pronto, perfeito, depois, repare na sua imagem, quando o mouse ficar encima dela, virará um circulo. 


OBS: Ela deletará um outro efeito qualquer que estiver na sua imagem.

2 comentários:

Unknown disse...

A minha imagem tem o efeito giratorio e zoom se eu fizer esse tutorial no meu blog eu perco esses efeitos que citei?? kisses!!

http://cantinhodaslovelys.blogspot.com.br/

ISOKA MONSTER HIGH disse...

Simm ;p,

mas é melhor vc salvar, e depois você pode colocar, porque se der algo errado,vocêvolta! ;)