CSS: recursos interessantes do raio da borda

O que pode ser feito com a propriedade border-radius CSS? O autor do material, cuja tradução publicamos, diz mais do que parece à primeira vista. Em particular, estamos falando do fato de que os cantos dos elementos arredondados por essa propriedade podem ter uma forma muito interessante.


Sugerimos falar sobre os meandros do uso border-radius .

Propriedades antigas e web design moderno

Este ano, na Frontend Conference Zurich , Rachel Andrew fez uma apresentação sobre as possibilidades da tecnologia CSS Grid. No final da apresentação, ela disse algo sobre as antigas propriedades CSS e suas palavras chamaram minha atenção. Nomeadamente, parecia o seguinte: “A imagem foi redondada exclusivamente usando a propriedade border-radius bem suportada. Lembre-se de que o CSS antigo ainda existe e ainda pode ser útil. Você não precisa sempre usar algo completamente novo para criar efeitos. "

Algum tempo depois dessa apresentação, ocorreu-me que o círculo é apenas uma pequena parte do que pode ser feito com o border-radius . Fascinado por essa ideia, decidi lidar adequadamente com essa propriedade.

Dominar o raio da borda

Meaning Significado único

Vamos começar com o básico. Espero que você não fique entediado com este exemplo. Você pode estar familiarizado com CSS e também com a propriedade border-radius . Ele existe há algum tempo, e eles o usam principalmente para indicar um único significado. É assim: border-radius: 1em . Talvez esse tenha sido um dos recursos mais comentados do CSS3 em 2010, quando css3please.com era o melhor amigo do designer.

Ao usar um valor único para o border-radius cantos do elemento são arredondados de acordo com esse valor.


Arredonda todos os cantos de um quadrado para um único valor de raio da borda

Como você pode ver no exemplo acima, você pode definir valores fixos não apenas especificando unidades de medida após números, como px , rem ou em , mas também um sinal de porcentagem. Isso geralmente é usado para criar círculos quadrados quando o border-radius definido como 50%. O valor percentual é baseado na largura e altura do elemento. Portanto, quando aplicado a retângulos, os ângulos resultantes não serão simétricos. Aqui está um exemplo que demonstra a diferença entre border-radius: 110px e border-radius: 30% aplicadas a um retângulo.


Arredondando os cantos de um retângulo

Preste atenção ao fato de que os cantos do retângulo direito são assimétricos e lembre-se disso. Será útil para nós um pouco mais tarde.

▍ Quatro valores separados

Ao usar mais de um valor de border-radius , você ajusta as configurações para cada canto, começando no canto superior esquerdo e movendo no sentido horário. Aqui, novamente, você pode usar valores percentuais. Eles também podem ser misturados com valores fixos.


Definindo parâmetros para os quatro cantos de um elemento

IghtOito valores separados por uma barra

Eu acho que muitos de vocês já tentaram tudo o que falamos acima. Agora é a hora de algumas experiências realmente interessantes. O que acontece se os valores são separados por uma barra e até oito são especificados? Primeiro, dê uma olhada na especificação . Ele nos diz que, se os valores forem fornecidos antes e depois da barra, os valores antes da barra especificarão o raio horizontal e os valores após a vertical. Se não houver barra, os dois raios serão os mesmos.

Portanto, os valores antes da barra são responsáveis ​​pelas distâncias horizontais e os valores após a barra são responsáveis ​​pela vertical. Tudo isso é bom, mas aqui surge uma pergunta lógica: "Do que estamos falando?" Lembre-se dos valores percentuais do arredondamento dos cantos definidos para formas retangulares? Diferentes valores absolutos para distâncias verticais e horizontais foram aplicados e cantos assimetricamente arredondados estavam presentes. É exatamente isso que você pode obter usando uma barra ao definir o border-radius .

Vamos comparar os efeitos que as seguintes configurações fornecem: border-radius: 4em 8em e border-radius: 4em / 8em . Os resultados serão muito diferentes.


Os ângulos simétricos do elemento esquerdo são um quarto de círculo e os ângulos assimétricos do elemento esquerdo são partes de uma elipse

Para ser sincero, os números obtidos como resultado da aplicação das configurações acima parecem estranhos. No entanto, não esqueça que os círculos são criados usando os seguintes parâmetros: border-radius: 50% . O círculo é obtido devido ao fato de que dois valores que definem um lado são somados e 100% (50% + 50% = 100%) são obtidos e não há linhas retas no quadrado original. Se você pensa no mesmo espírito sobre os oito valores usados ​​para definir a propriedade do border-radius da border-radius , acontece que, com a ajuda deles, você pode descrever uma figura que se parece com uma palheta de guitarra ou uma célula de um organismo vivo.


Figura resultante da aplicação de 8 valores separados por uma barra


Quatro elipses sobrepostas formando uma forma

Levei um tempo para me acostumar. Às vezes, todas essas construções podem ser difíceis de compreender. Se você se sente atraído por formas complexas de elementos personalizáveis ​​com border-radius , pode usar esta pequena ferramenta.

Sumário

Agora que você sabe que, ao definir o border-radius pode usar 8 valores; se você experimentou a ferramenta mencionada acima, poderá sentir uma leve decepção, pois ela não permite que você controle cada valor de forma independente. Nesse caso, então aqui , especialmente para você, sua versão que suporta a configuração independente de todos os oito valores. Antes de usá-lo, lembre-se de uma conversa do filme Ghostbusters de 1984:

- Não atravesse correntes.
Porque?
- Mas vai ser ruim.

O fato é que, se você mover os manipuladores para que eles se cruzem de um lado da figura, ele começará a se comportar ... Vamos apenas dizer - ele começará a se comportar de forma imprevisível. O que posso dizer - veja por si mesmo. No final, isso não levará a uma catástrofe universal, mas, ao fazer isso, lembre-se de que nós o alertamos.

Caros leitores! Você usa a propriedade CSS border-radius?