Criando Bolas e Círculos com CSS

Artigo que explica como gerar bolas, círculos e elipses apenas usando CSS 3 e HTML.

Introdução

Recentemente vimos como criar triângulos com css. Neste artigo, veremos como criar bolas, círculos e elipses com CSS.

A propriedade border-radius

Criar bolas, círculos e elipses com CSS 3 é muito mais simples do que criar triângulos. O efeito é conseguido usando-se a propriedade "border-radius" com valor 50% em todos os cantos de um elemento. Depois, basta colocar uma borda ou uma cor de fundo, conforme desejado. Se quer um círculo, aplique apenas uma borda. Se quer uma bola preenchida, aplique a cor de fundo (e a borda também, se quiser). Para ter um círculo ou bola perfeitos, especifique uma altura e largura idênticos, caso contrário, terá uma elipse.

Veja um exemplo:

.bola {
    border-radius: 50%;
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #000000;
    background-color: #FFFF00;
}

Resultado:

O mais importante é que o elemento tenha display "inline-block" ou "block", tenha a mesma largura e altura, e que especifique o border-radius com valor 50%. Se você quer colocar algum texto centralizado, também pode ser útil especificar text-align: center e line-height com a mesma altura da bola.


Um efeito bacana que pode ser colocado na bola é uma sombra externa ou interna. Para mais detalhes sobre como colocar sombras, leia o artigo layout com sombras. Veja um exemplo, que adiciona as seguintes propriedades:

box-shadow: inset -10px -10px 10px #660, inset 3px 3px 5px #FFF;

Resultado:


Por fim, sabendo usar os backgrounds com gradientes, ainda podemos colocar um efeito visual de reflexo de luz acima da bola, através de uma elipse que usa gradiente como cor de fundo (do branco para transparente):

R
U
B
S

É impressionante o quanto podemos explorar o CSS 3 para obter efeitos que só se conseguia através de imagens no passado. E o mais legal é que, utilizando CSS transitions, também conseguimos mudar a cor destas bolas ao passar o mouse, por exemplo. Tudo de forma suave e nativa do navegador.

12 comentários

Rubens Takiguti Ribeiro (autor do blog) disse...

É só colocar colocar estas regras de CSS (note que display precisa ser trocado de "inline-block" por "block"):

display: block;
margin-left: auto;
margin-right: auto;

Alex Artur Hummes disse...

Olá... e se eu quiser colocar uma letra dentro do círculo? Tipo usar uma variável para pegar as iniciais do nome do usuário e colocar dentro do círculo.

Rubens Takiguti Ribeiro (autor do blog) disse...

Oi, Alex
Para colocar um texto no circulo, basta colocar o texto dentro da DIV e adicionar essas regras de estilos:
line-height: 100px;
text-align: center;
vertical-align: top;

(observação: o line-height deve ter o mesmo valor do height para que o texto fique alinhado no centro do circulo verticalmente)