Como adicionar imagens redondas ao teu site usando CSS

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?

Pedro Fonseca

Pedro Fonseca

passionate about the internet. social media lover and wordpress geek.

Queres receber as nossas mensagens semanais o teu email?

As nossas mensagens são compostas por pequenos textos escritos a pensar em ti (sim a sério, a pensar em ti).

Não enviamos SPAM porque também não gostamos de o receber.