Como criar elementos arredondados com CSS
Aprenda neste artigo como criar elementos arredondados utilizando recursos do CSS.
232 Gostei
Artigos HTML e CSS CSS: como criar elementos arredondados
Elementos arredondados no CSS
Um ponto importante na criação de estilos com CSS é a utilização de elementos arredondados ou redondos. De modo geral, a decisão de como o website irá se comportar visualmente é tomada antes do desenvolvimento. O objetivo é gerar algo visualmente interessante para o usuário, e muitas vezes isso pode não ser possível empregando apenas elementos quadrados ou retangulares. Pensando nisso, nesse artigo veremos o que é necessário para termos elementos com as bordas arredondadas ou totalmente redondos, utilizando somente CSS. Ao final, seremos capazes de criar elementos como os mostrados na Figura 1.
Figura 1. Exemplo de elementos arredondado (esquerda) e circular (direita)
Saiba mais sobre CSS, responsividade e outros conceitos
Botão arredondado com CSS
Para entendermos melhor o conceito de "arredondar" elementos utilizando CSS, vamos criar um elemento arredondado. Para isso, iremos definir uma classe CSS capaz de funcionar tanto com o <button> quanto com o elemento <input type="button"/>.
A primeira coisa que precisamos especificar a respeito do botão é o que não queremos; e isso é o que vemos na Figura 2. Essa imagem traz a ilustração do botão padrão, com os estilos próprios do elemento.
Figura 2. Botão sem estilos aplicados
A partir dele, podemos começar a criar os estilos que serão aplicados. Dito isso, observe a Listagem 1, que traz o CSS inicial utilizado para a criação do botão conforme desejamos. Note que não há qualquer definição do que deve ser feito para criar o elemento arredondado que desejamos; apenas algumas propriedades relacionadas a cores e outras informações relevantes. O resultado dessa primeira "iteração" está representado na Figura 3.
01 .dvm-button {
02     color: #FFF;
03     background-color: green;
04     border: none;
05     height: 60px;
06     line-height: 30px;
07     padding: 0 20px;
08     text-transform: uppercase;
09     font-weight: bold;
10     cursor: pointer;
Listagem 1. CSS inicial para o botão
Linha 01: Definição do nome da classe. Optamos pelo nome "dvm-button", com um prefixo que remete às iniciais da DevMedia. Esse tipo de nomenclatura é bastante comum em classes CSS;
Linha 02: Propriedade color. Aqui, indicamos que teremos um texto branco (#FFF) no botão;
Linha 03: Propriedade ­background-color. Especifica que a cor de fundo do botão será verde;
Linha 04: Resetamos a propriedade border, para evitar os valores padrão do elemento <button>;
Linha 05: A altura é definida para o botão (height) em 60 pixels;
Linha 06: Propriedade bastante importante. É ela que centraliza verticalmente o texto do botão. Para esse comportamento, o valor dessa propriedade deve ser exatamente a metade da altura do elemento;
Linha 07: Definição do padding, a margem interna do botão. Nesse caso, optamos por 0 (zero) no eixo y (distância do topo e base) e 20 pixels nas laterais direita e esquerda;
Linha 08: Propriedade text-transform­, informa que o texto do botão terá somente letras maiúsculas, independentemente do valor inserido no HTML;
Linha 09: Propriedade font-weight, ou largura da fonte, informa, nesse caso, que temos uma fonte em negrito;
Linha 10: Por meio da propriedade cursor, garante que o botão sempre terá o ponteiro como cursor, ou seja, no momento em que o mouse estiver no botão, teremos esse tipo de cursor.
Figura 3. Estilo inicial da classe dvm-button aplicado ao <button>.
A parte de arredondamento do elemento, entretanto, ainda não foi criada. Para isso, existe uma propriedade específica do CSS: border-radius, ou raio da borda, em uma tradução literal. O raio é uma medida utilizada no círculo (e em outros elementos similares) para indicar a distância da borda em relação ao centro. Assim, ao setarmos o border-radius, estamos definindo a distância que essa borda terá em relação a um centro imaginário, arredondando o elemento. Isso fica claro na Figura 4, que mostra o elemento arredondado que iremos criar.
Figura 4. Propriedade border-radius em ação.
Dessa forma, o que precisamos em nosso elemento é algo como o mostrado na Listagem 2. O código anterior, para definição das demais propriedades do botão, foi abreviado, para focarmos no que realmente interessa neste momento. Ademais, foi adicionada uma ação para o elemento no caso de hover, ou seja, quando o mouse estiver sobre ele. O resultado final do botão pode ser observado na Figura 5.
03     border-radius: 30px;
06 .dvm-button:hover {
07     transform: scale(1.05);
Listagem 2. CSS modificado para definição do border-radius e ação hover
Linha 03: Definição da propriedade border-radius, responsável pelo arredondamento do elemento que utilizará essa classe (<button>, no caso). Note que temos um raio de 30 pixels, garantindo que o elemento será totalmente arredondado nas laterais, uma vez que o mesmo possui altura de 60 pixels;
Linhas 06 e 07: Classe CSS dvm-button no momento do vhover, ação de manter o cursor sobre o elemento. Nesse caso, apenas utilizamos a propriedade transform para aumentar ligeiramente o botão.
Figura 5. Botão final, com as laterais arredondadas
Criando elementos totalmente circulares com CSS
A partir do que vimos em nosso botão arredondado, podemos presumir o que é necessário para termos um elemento totalmente circular utilizando CSS. Note que o botão que criamos, mostrado na Figura 5, tem as laterais completamente circulares, a partir de um border-radius de 30px em conjunto com uma altura de 60px. A partir disso, é possível concluir que, para termos um elemento totalmente circular, basta configurar um border-radius de 50% da altura (height) e largura (width).
No código da Listagem 3 temos a classe dvm-circle. Essa classe segue o mesmo padrão definido anteriormente para a nomenclatura e traz as propriedades necessárias para um elemento circular, como o mostrado na Figura 6.
01 .dvm-circle {
02     margin: 5px;
03     background-color: black;
04     color: white;
05     padding: 5px;
06     height: 20px;
07     width: 20px;
08     border-radius: 15px;
Listagem 3. Código da classe dvm-circle
Linha 01: Definição da classe dvm-circle;
Linhas 02 a 05: Definição das propriedades básicas do elemento. Aqui, informamos que teremos uma margem (margin) de 5px em cada lado, bem como o padding. As cores de fundo e frente (background-color e color, respectivamente) também foram especificadas. Note que utilizamos as cores preta para o fundo e branca para os elementos internos, como textos;
Linhas 06 e 07: Especificamos a altura e a largura do elemento circular, ambas de 20px. Somando-se esses valores ao padding em cada direção, temos um elemento com altura e largura totais de 30 pixels;
Linha 08: Definição da propriedade border-radius baseada na altura total, somando-se o padding. Note que o valor é de exatamente 50% da altura e largura do elemento, gerando um visual circular.
Figura 6. Elemento circular no website.
Apesar de funcionar, a abordagem mostrada na Listagem 3 deve ser evitada, pois é extremamente "enraizada" em um determinado tamanho; 30 pixels, no caso. Para evitar que isso aconteça, podemos informar o valor percentual que comentamos anteriormente – 50% – para o border-radius. Dessa forma, teremos algo completamente independente da altura e largura, o que nos mostra que essas propriedades são dispensáveis no CSS, como podemos confirmar na Listagem 4, que apresenta um código muito similar ao que vimos anteriormente, mas com essas melhorias. O resultado de sua execução será o mesmo (Figura 6).
.dvm-circle {
Listagem 4. CSS modificado para utilizar % em vez de valores fixos
Saiba mais sobre CSS no artigo: Como criar um slider com CSS e HTML
Laravel e Eloquent ORM: API RESTful com relacionamento 1:N:
Neste curso veremos como implementar o relacionamento 1:N em APIs utilizando o Laravel. Partiremos de uma API de empresas pronta, ao longo do curso, veremos como relacionar com uma entidade de vagas e posteriormente com uma entidade de requisitos.
Será que o meu HTML está pronto?:
.NET Class Libraries: Utilizando bibliotecas de classes:
Principais atividades para administração do Oracle RAC:
Neste artigo serão apresentados os principais conceitos sobre o Oracle Real Application Cluster (RAC) e os principais comandos para administração e manutenção destes ambientes.
Cinco ferramentas CSS3 online para agilizar seu trabalho:
Veja neste artigo cinco ferramentas online para criação de códigos CSS3 que podem facilitar e agilizar bastante o seu trabalho durante o desenvolvimento de interfaces com a mais recente versão das CSS.
CSS3 Box Shadow Generator:
Veja nesse artigo como usar ferramentas online para geração de box shadow (sombras) em elementos HTML com CSS3.
Programando para Web: Primeiras dúvidas:
Nesse DevCast vamos discutir sobre algumas das principais dúvidas que surgem quando começamos a programar para a web.