De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

Imagens arredondadas com css

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 01 de junho de 2018

Um recurso muito interessante e que considero visualmente agradável, é a inserção de imagens arredondadas em páginas web, principalmente para fotos de pessoas.

Muitos pensam que para isto precisamos de conhecer um editor de imagens para cortar a foto da maneira certa. Mas existe uma maneira muito mais simples, usando diretivas CSS (Cascading Style Sheets).

Para começar, vou usar uma foto minha, no formato retangular:

Vamos agora usar o código abaixo para exibir a mesma imagem:

<img src=/imagens/rubens.jpg style="border-radius: 50%"></PRE>

E vejam o resultado:

Importante, este efeito se obtém através do arredondamento das bordas, ou seja, você só conseguirá um círculo perfeito se a imagem for quadrada. Se for retangular, a imagem ficará ligeiramente ovalada.

Referência: How to make rounded images with CSS

Adicionar comentário

* Campos obrigatórios
5000
Powered by Commentics

Comentários

Nenhum comentário ainda. Seja o primeiro!


Veja a relação completa dos artigos de Rubens Queiroz de Almeida