Parece que o charme do momento é a apresentação das imagens redondinhas ao invés de quadradinhas, porque? acredito que algum curioso algum dia resolver testar as novas propriedades do CSS 3 e descobriu algo muito interessante: uma propriedade de transforma a imagem de quadrada para redonda. Bingo!! Descobriu-se a America!!Bom e como fazer isso? eu estava imaginando um controle em Java ou .NEt que processaria a imagem, que cortaria as bordas, mas pessoal, a coisa é simples, esqueça essas idéias de Gerico, e acho que pela simplicidade e belo efeito, você vai aderir a esta moda também.
Passo 1: Cada um no seu quadrado
Primeiramente precisará de uma imagem quadrada, se usar uma retangular não vai ficar totalmente redondinhas, seria tipo uma linguiça, não legal. E a imagem também precisa ter uma dimensão fixa, previamente conhecida, por exemplo 100x100, 200x200, e por ai vai.Passo 2: Não Fuja da Aula de Geometria
Se não fugiu saberá o significado de RAIO, que é a metade de um diâmetro, ... me lembrei dos meus dias de desenhista da Torque, do Jaques, rs, o chefe era bravo. Então vamos lá, para uma imagem de 200x200, por exemplo teremos um raio de 100.
Em resumo pegue a lateral do quadrado e divida por dois e terá o tal RAIO.
Crie uma classe Image e defina Border-Radius:RAIO, ou seja, para nosso exemplo, Border-Radius:100; Tai o segredo da Maria.
Passo 3: Peça ajuda ao Steve
Obtenha uma imagem de boa qualidade e aplique a classe com o Border-Radius e terá o tal efeito da imagem redondinha.
Mistério resolvido!
