CSS: caractéristiques intéressantes de border-radius

Que peut-on faire avec la propriété CSS border-radius ? L'auteur du matériel, dont nous publions la traduction, en dit plus qu'à première vue. En particulier, nous parlons du fait que les coins des éléments arrondis par cette propriété peuvent avoir une forme très intéressante.


Nous suggérons de parler des subtilités de l'utilisation de border-radius .

Propriétés anciennes et conception Web moderne

Cette année, lors de la conférence Frontend de Zurich , Rachel Andrew a fait une présentation sur les possibilités de la technologie CSS Grid. À la fin de la présentation, elle a dit quelque chose sur les anciennes propriétés CSS et ses mots ont attiré mon attention. À savoir, cela ressemblait à ceci: «L'image a été créée en utilisant exclusivement la propriété border-radius bien prise en charge. N'oubliez pas que les anciens CSS existent toujours et peuvent toujours être utiles. Vous n'avez pas besoin d'utiliser toujours quelque chose de complètement nouveau pour créer des effets. "

Quelque temps après cette représentation, il m'est venu à l'esprit que le cercle n'est qu'une petite partie de ce qui peut être fait avec border-radius . Fasciné par cette idée, j'ai décidé de bien gérer cette propriété.

Maîtriser le rayon de la frontière

▍ Signification unique

Commençons par les bases. J'espère que cet exemple ne vous ennuie pas. Vous connaissez peut-être CSS, ainsi que la propriété border-radius . Il existe depuis un certain temps et ils l'utilisent principalement pour indiquer une seule signification. Il ressemble à ceci: border-radius: 1em . C'était peut-être l'une des fonctionnalités CSS3 les plus discutées en 2010, lorsque css3please.com était le meilleur ami du concepteur.

Lorsque vous utilisez une seule valeur pour border-radius coins de l'élément sont arrondis en fonction de cette valeur.


Arrondit tous les coins d'un carré à une seule valeur de rayon de bordure

Comme vous pouvez le voir dans l'exemple ci-dessus, vous pouvez définir des valeurs fixes non seulement en spécifiant des unités de mesure après des nombres, comme px , rem ou em , mais également un signe de pourcentage. Ceci est généralement utilisé pour créer des cercles basés sur des carrés lorsque le border-radius défini sur 50%. La valeur en pourcentage est basée sur la largeur et la hauteur de l'élément. Par conséquent, lorsqu'il est appliqué à des rectangles, les angles résultants ne seront pas symétriques. Voici un exemple qui montre la différence entre border-radius: 110px et border-radius: 30% propriétés appliquées à un rectangle.


Arrondir les coins d'un rectangle

Faites attention au fait que les coins du rectangle droit sont asymétriques et rappelez-vous ceci. Il nous sera utile un peu plus tard.

▍ Quatre valeurs distinctes

Lorsque vous utilisez plusieurs valeurs de border-radius , vous ajustez les paramètres pour chaque coin, en partant du coin supérieur gauche et en vous déplaçant dans le sens horaire. Ici encore, vous pouvez utiliser des valeurs en pourcentage. Ils peuvent également être mélangés avec des valeurs fixes.


Définition des paramètres pour les quatre coins d'un élément

IghtHuit valeurs séparées par une barre oblique

Je pense que beaucoup d'entre vous ont déjà essayé tout ce dont nous avons parlé ci-dessus. Il est maintenant temps de faire des expériences vraiment intéressantes. Que se passe-t-il si les valeurs sont séparées par une barre oblique et jusqu'à huit sont spécifiées? Jetez d'abord un œil à la spécification . Il nous dit que si les valeurs sont données avant et après la barre oblique, alors les valeurs avant la barre oblique spécifient le rayon horizontal et les valeurs après la verticale. S'il n'y a pas de barre oblique, les deux rayons seront identiques.

Ainsi, les valeurs avant la barre oblique sont responsables des distances horizontales et les valeurs après la barre oblique sont responsables de la verticale. Tout cela est bien, mais ici se pose une question logique: "De quoi parle-t-on?" Vous vous souvenez des valeurs de pourcentage d'arrondi des coins définies pour les formes rectangulaires? Différentes valeurs absolues pour les distances verticales et horizontales y ont été appliquées et des coins arrondis asymétriquement étaient présents. C'est exactement ce que vous pouvez réaliser en utilisant une barre oblique lors de la définition du border-radius .

Comparons les effets des paramètres suivants: border-radius: 4em 8em et border-radius: 4em / 8em . Les résultats seront très différents.


Les angles symétriques de l'élément gauche sont d'un quart de cercle, et les angles asymétriques de l'élément gauche font partie d'une ellipse

Pour être honnête, les chiffres obtenus à la suite de l'application des paramètres ci-dessus semblent étranges. Cependant, n'oubliez pas que les cercles sont créés en utilisant les paramètres suivants: border-radius: 50% . Le cercle est obtenu du fait que deux valeurs définissant un côté sont additionnées et que 100% (50% + 50% = 100%) sont obtenus et qu'il n'y a pas de lignes droites à partir du carré d'origine. Si vous pensez dans le même esprit aux huit valeurs utilisées pour définir la propriété border-radius , il s'avère qu'avec leur aide, vous pouvez décrire une figure qui ressemble à un médiator de guitare ou à une cellule dans un organisme vivant.


Figure résultant de l'application de 8 valeurs séparées par une barre oblique


Quatre ellipses superposées formant une forme

Il m'a fallu un certain temps pour m'y habituer. Parfois, toutes ces constructions peuvent être difficiles à comprendre. Si vous êtes attiré par des formes complexes d'éléments personnalisables avec border-radius , vous pouvez utiliser ce petit outil.

Résumé

Maintenant que vous savez que lorsque vous définissez border-radius vous pouvez utiliser 8 valeurs, alors, si vous avez essayé l'outil ci-dessus, vous pouvez ressentir une légère déception, car il ne vous permet pas de contrôler chaque valeur indépendamment. Si c'est le cas, alors voici , spécialement pour vous, sa version qui prend en charge la configuration indépendante des huit valeurs. Avant de l'utiliser, souvenez-vous d'une conversation du film Ghostbusters de 1984:

- Ne traversez pas les cours d'eau.
- Pourquoi?
- Mais ce sera mauvais.

Le fait est que si vous déplacez les manipulateurs de sorte qu'ils se croisent d'un côté de la figure, alors il commencera à se comporter ... Disons simplement - il commencera à se comporter de façon imprévisible. Que puis-je dire - voyez par vous-même. En fin de compte, cela ne conduira pas à une catastrophe universelle, mais en faisant cela, souvenez-vous que nous vous avons prévenu.

Chers lecteurs! Utilisez-vous la propriété CSS border-radius?