você está aqui: Home  → Arquivo de Mensagens

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



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

 

 

Opinião dos Leitores

Francisco Meira Aguiar
01 Jun 2018, 09:54
Alternativamente e para quem usa as classes w3.css, pode-se utilizar a classe w3-round

ver como em: https://www.w3schools.com/w3css/w3css_round.asp
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script