Já se perguntou como fazer aquelas imagens circulares extravagantes sem a necessidade de editá-las no Photoshop? Se você não sabe do que estou falando, consulte Scenewave . Na verdade, isso é bastante simples. Por causa deste exemplo, vamos usar o logotipo da Coca-Cola a partir daqui .
Código básico
Vamos começar com HTML e CSS básicos para isso (presumo que você possa configurar um documento HTML em branco e vincular a ele uma folha de estilo).
<div class="img-circular"></div>Vamos configurar um estilo básico para a classe img-circular .
.img-circular{
width: 200px;
height: 200px;
background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
background-size: cover;
display: block;
}A única coisa com a qual você pode não estar familiarizado é a linha 5. O background-size é uma nova propriedade CSS3, que permite manipular com as dimensões do fundo. Você pode definir sua largura e altura inserindo valores de pixel exatos, porcentagem, ou fazer a capa do fundo ou fazê-la caber no contêiner inteiro. Certifique-se de ver a documentação do tamanho do plano de fundo para obter mais informações.
Tornando as coisas arredondadas
Agora temos a imagem, que se encaixa no nosso container quadrado. Vamos alterar o código CSS para fazer um quadro circular. Usaremos a propriedade border-radius , que nos dá a oportunidade de arredondar os cantos do elemento ao qual é aplicada. Para tornar nossa imagem circular, temos que usar valores, que são metade dos valores do tamanho da imagem. Nosso arquivo CSS agora se parece com este:
.img-circular{
width: 200px;
height: 200px;
background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}E pronto! As novas propriedades CSS nos permitem criar efeitos que podem economizar minutos preciosos de Photoshop.
Outras extensões
Se você estudou cuidadosamente os links para a documentação que eu dei a você (caso você tenha perdido – dê uma olhada ), você sabe perfeitamente que pode manipular os cantos da imagem de forma não simétrica. Experimente o código CSS abaixo. O que aconteceu?
.img-circular{
width: 200px;
height: 200px;
background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
background-size: cover;
display: block;
border-top-left-radius: 100px;
-webkit-border-top-left-radius: 100px;
-moz-border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-bottom-right-radius: 100px;
}Para ver os efeitos deste tutorial, visite esta página jsFiddle .