Criando Bolas e Círculos com CSS

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.