Imagens redondas com CSS

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:

<div class="redondo">Jucabala</div>

Agora vamos estilizar esse DIV para que ele fique redondo.


.redondo {
   width: 200px;
   height: 200px;
   background-color: #000;
   color: #FFF;

   /* Agora a mágica */
   border-radius: 50%;
}

E agora com imagem…

<img src="http://www.lorempixel.com/300/300/people" />

Estilizando…


.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!

Lorempixel – Mais um poderoso placeholder

Logo do LorenPixel

Buenas gurizada!

Apresento mais um place holder, dessa vez um poderoso mecanismo!
Para quem não sabe o que é place holder, escrevi não faz muito sobre o assunto no post do placekitten.com, confere lá…

Configurações do LorenPixel
Imagem que mostra as configurações do LorenPixel

Agora apresento outro place holder, o lorempixel, semelhante ao loremipsum, mas com imagens. Você consegue configura-las, inclusive com o tipo de imagem que vai aparecer. E cá pra nós, é melhor contextualizar o conteúdo da imagem com o conteúdo do trabalho do que apresentar um monte de gatinhos pro cliente… heheh

Para gerar as imagens, basta digitar diretamente no navegador a URL com as configurações que tu queres, por exemplo: Para gerar uma imagem de 640 pixels de largura (width), 480 de altura (heigth) e da categoria abstrata, basta digitar a seguinte URL: http://lorenpixel.com/640/480/abstract

As configurações podem ser feitas também pelo painel contido no site http://lorenpixel.com

Resultado do LorenPixel

Espero, como sempre, ter ajudado!

Abração 😉