CSS Desenvolvimento HTML

Como fazer um círculo com CSS de forma fácil

30 de setembro de 2019

Como fazer um círculo com CSS de forma fácil

Neste post vamos ver como fazer um círculo com CSS puro, não utilizando imagens ou qualquer outra recurso externo, para ter um código de fácil manutenção e performático

círculo com CSS capa

Como fazer um círculo com CSS: teoria

Bom, para criarmos esta figura geométrica amplamente utilizada com CSS, devemos partir de um quadrado

Então um elemento de HTML com width e height estabelecidas é necessário

A partir daí a única coisa que precisaremos fazer é adicionar um border-radius de 50%

E então o CSS se encarregará de realizar o círculo

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Círculo com CSS: prática

Agora vamos ver na prática como criar o círculo

A estrutura de HTML pode ser feita dessa forma, utilizei uma div neste caso, mas pode ser qualquer elemento, veja:

<div id="circulo"></div>

Agora com CSS, vamos criar nosso quadrado:

#circulo {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px;
}

Note que o background-color é só para se destacar do fundo branco do HTML, você pode colocar qualquer cor

E a margin é para afastar do canto do navegador para o printscreen, estas duas regras são opicionais

Neste ponto teremos o seguinte resultado:

passo 1 círculo

Agora quando completamos o código com o border-radius:

#circulo {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    background-color: red;
    margin: 50px;
}

Temos o seguinte resultado:

passo 2 círculo

E então o círculo está completo, legal né? 😀

Então apenas com essas poucas linhas de código temos algo mais fácil de dar manutenção do que se fosse por imagem

Imagina criar uma nova imagem toda vez que este círculo mudar de cor ou tamanho, seria tenso!

Além de ter que requisitar um arquivo mais do seu servidor, precisa otimizar  a imagem…

São vários motivos que levam criar uma figura só com CSS ser mais vantajoso

Código final para quem não quer ler tudo

Ta com pressa? ta na mão!

<!-- HTML -->
<div id="circulo"></div>

/* CSS */
#circulo {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    background-color: red;
    margin: 50px;
}

Conclusão

Vimos que para criar um círculo com CSS devemos criar um quadrado primeiro com width e height com algum valor

Então devemos apenas aplicar o border-radius de 50%

Com esta combinação o quadrado se transformará em um círculo, feito apenas com CSS 🙂

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

1

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of