terça-feira, 6 de outubro de 2015

Imagens Redondinhas

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!