Oubl’á, não sejas quadrado…

Quantas vezes quiseste colocar imagens redondas no teu site, e ficavas obrigado a usar o típica imagem quadrada, ou tinhas de a editar em Photoshop para cortar em forma redonda com fundo branco ou transparente?

border-radius

Não precisas de usar editores de imagem para obter o efeito arredondado. Basta adicionares à tua folha de estilos (style.css) o seguinte código:

.img-circle {
border-radius: 50%;
}

E agora qualquer imagem, com img-circle será apresentada como um círculo perfeito:

<img class=”img-circle” src=”http://oteudominio.com/wp-content/uploads/2015/11/round.jpg”>

Atenção, que a imagem original deve ser quadrada, em caso contrário, em vez de obteres um círculo perfeito, terás algo oval.

Este ‘truque’ funciona para quase todos os browsers, exceto para os utilizadores do IE8. Mas não te preocupes, eles já estão habituados a uma má experiência online 😛 .

Gostamos de partilhar pequenas dicas, mas isso já tu sabias certo?