Fala gurizada, tranquilo?
Está muito em alta colocar imagens em formato redondo, mas tem muita gente fazendo isso em editores gráficos. Não é proibido, mas além de dar um trabalhão, imagina se o Google+ tivesse que ter funcionários para ficar fazendo mascaramento nas imagens de perfil… não dá né?!
Existe uma forma de fazer isso cross-browser somente com o CSS. Podemos utilizar essa técnica em DIV’s, inputs, imagens, etc.
Bom, sabemos fazer que para fazer um arredondamento de bordas com CSS, precisamos utilizar a propriedade border-radius. A técnica consiste exatamente em aumentar o ângulo do border-radius até que forme um círculo (50%).
Mãos à obra!
Primeiramente vamos testar com um DIV. Para isso, crie um div como o HTML abaixo:
1 | < div class = "redondo" >Jucabala</ div > |
Agora vamos estilizar esse DIV para que ele fique redondo.
1 2 3 4 5 6 7 8 9 | .redondo { width : 200px ; height : 200px ; background-color : #000 ; color : #FFF ; /* Agora a mágica */ border-radius : 50% ; } |
E agora com imagem…
1 |
Estilizando…
1 2 3 4 | .redondo { /* Agora a mágica */ border-radius : 50% ; } |
Para treinar, experimente brincar com a pseudo-classe hover e transition… cria um efeito bem legal.
Postem seus resultados, outro dia eu posto um exemplo assim.
Abraço!
Me ajudou muito!