Usos avançados de Border­radius CSS3 para criar formas

O incrível mundo de border­radius, muito mais que caixas com cantos arredondados, permite fazer formas de diversos tipos.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 28/11/13
Valorize este artigo:

Se perguntarmos aos desenvolvedores se conhecem a propriedade das CSS3 border­radius, é quase certo que 99% dos profissionais digam que sim. O que nos explicarão será mais ou menos o que em CriarWeb.com já analisamos no artigo Bordas arredondadas em CSS 3, mas há muito mais que conhecer em função desse atributo e vamos tentar resumi-lo nas linhas seguintes .

Os usos avançados são tão variados quanto nossa imaginação nos permitir e vão desde a criação de formas até a incorporação de sombras ou animação para fazer efeitos mais especiais. Neste artigo você aprenderá mais sobre a propriedade CSS3 border­radius e ensinaremos a criar conteiners com formas de diversos tipos.

Nota: É importante assinalar que as técnicas que vamos contar neste artigo foram aprendidas na conferencia Border­Radius de Lea Verou, que recomendamos ver. Está em inglês, mas é bastante fácil de seguir.

Antes de começar "agora é o momento de usar border­radius"

Atualmente, a totalidade dos navegadores modernos aceita border­radius sem necessidade de usar prefixos CSS, assim que é um bom momento para incorporá-lo no nosso dia a dia, para qualquer tipo de web.
Só navegadores antigos, como Internet Explorer 8 ou anteriores, carecem de suporte para esta propriedade. Podemos especificar estilos alternativos para estes navegadores antigos, mas já é hora de deixarmos de nos preocupar com o fato dos web sites não serem vistos de forma igual nos navegadores obsoletos. Há que entender suas limitações e fazer com que usuários e clientes também as entendam.

Nota: Para os que, por qualquer motivo, necessitam mostrar comportamentos alternativos no navegador, bibliotecas como Modernizr seriam um complemento imprescindível.
A continuação, veremos usos muito interessantes que estão contemplados na especificação de border­radius para CSS3 e que podemos usar para fazer formas. Alguns são mais úteis e outros são meramente curiosidades.

Você pode ver uma página com os exemplos que vamos ver em funcionamento.

Especificar raio da borda para cada um dos cantos por separado

Devemos comentar como primeiro uso a possibilidade de especificar um raio para a borda de maneira independente em cada um dos quatro cantos: acima à esquerda, acima à direita, abaixo à direita e abaixo à esquerda.
border­radius: 10px 50px 20px 100px;

Aqui é importante saber que se um valor do border­radius para um canto é grande a ponto de não se ter espaço para desenhar todo esse tamanho de raio, todas as bordas são escaladas para conseguir que sejam proporcionais.
border­radius: 10px 50px 2000px 100px;

Se colocamos esse border­radius em um conteiner de tamanho 1000px, tendo em conta que há um border­radius para o canto inferior direito de 2000px (muito maior do que permitiria o conteiner), veremos que todos os cantos perdem raio na borda, para que sejam seus raios proporcionais à medida maior que não se pode representar, sem que nenhuma ultrapasse as medidas do possível.

Também podemos especificar as bordas de maneira separada com atributos como "border­top­left­radius" ou similares, úteis quando não queremos dimensionar o raio de mais de um canto ou queremos subscrever um de seus valores.
border­radius: 10px;
border­top­left­radius: 50px;

Formas circulares e derivadas

Outros usos interessantes, e às vezes impactantes do border­radius, são a criação de formas circulares, elipses, pílulas, etc. até outras mais complexas com formas de semicírculos, quartos de círculos, etc.
Para fazer uma forma de círculo basta ter dimensões iguais na altura e largura da caixa e em seguida aplicar um raio na borda de um pouquinho mais da metade do tamanho de sua dimensão, ou, como aprendemos no ponto anterior, que todos os raios para as bordas se escalam proporcionalmente se as dimensões da caixa não são suficientes para o raio que se quer aplicar, então bastaria colocar a mesma dimensão que utilizamos na altura e largura.

width: 500px;
height: 500px;
border­radius: 500px;

É simples jogar com estes valores para conseguir formas bastante interessantes. Conseguimos uma forma de pílula colocando a largura ou altura um pouco maior.

Um semicírculo se consegue aplicando a borda só a uns dos cantos.

width: 250px;
height: 500px;
border­radius: 0 500px 500px 0;

Mas, como conseguimos produzir uma elipse? Se simplesmente fazemos com que uma das dimensões da caixa seja superior à outra, obteremos uma forma de pílula e não de elipse.

width: 1000px;
height: 500px;
border­radius: 500px;

A solução rápida é usar porcentagens. Simplesmente devemos aplicar uma dimensão de 50% à propriedade border radius, que independentemente das dimensões da caixa, sempre será a metade da altura ou largura. Neste caso, se a camada tem a mesma largura que altura, produziremos um círculo e se a camada tem mais largura que altura, se obterá uma elipse.

width: 1000px;
height: 500px;
border­radius: 50%;

Especificando dois valores distintos de raio por canto

Em cada um dos cantos do elemento aos que aplicamos border­radius podemos atribuir dois valores por separado, para o raio horizontal e raio vertical. Em principio, se atribuímos um único valor, tanto o raio horizontal quanto o vertical é exatamente o mesmo, conseguindo cantos arredondados que têm percursos que se ajustariam a circunferências. No entanto, podemos atribuir valores de maneira separada para conseguir que o arredondado dos cantos não seja exatamente circular, mas que tenha uma curva elipsoide. Por exemplo:

border­bottom­left­radius: 30px 100px;

O raio arredondado que se aplicará ao canto inferior esquerdo terá o percurso de uma elipse com raio horizontal de 30 pixels e vertical de 100 pixels.

Nota: Lembre que você tem disponível todos os exemplos em um arquivo à parte, que ajudará a compreender melhor estas explicações.
Esta possibilidade de especificar dois raios por cada canto pode ser implementada, também, quando especificamos o border­radius de uma vez, com o atributo border radius, no que primeiro definimos todos os raios para cada canto na horizontal e depois todos os raios na vertical, separados por "/", como se vê a continuação.

border­radius: 30px / 180px;

Esta nova forma de definir a borda arredondada nos ajuda a criar formas diferentes, como conseguir meia elipse.

width: 800px;
height: 200px;
border­radius: 50% / 100% 100% 0 0;

Ou se somos ainda mais imaginativos, poderíamos construir um ovo, com dimensões de largura e altura e distintos raios nos cantos, como se pode ver a seguir.

width: 300px; height: 500px; border­radius: 50% / 60% 60% 40% 40%;

Esperamos que estes conhecimentos e práticas tenham resultado úteis e que você possa ter obtido ideias para incorporar em seu web design. Agora, possivelmente você tenha ficado com vontade de mais e queira saber como se solucionam alguns dos problemas que você pode ver durante esta prática.

No próximo artigo ensinaremos técnicas para conseguir que os textos se adaptem às formas que você está construindo com CSS.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato