L'utilisation du découpage dans CSS peut nous aider à nous éloigner de tout dans nos conceptions qui ressemble à une boîte. Vous pouvez créer un chemin de découpe en utilisant différentes formes de base ou un SVG. Supprimez ensuite les parties d'un élément que vous ne souhaitez pas afficher.
Les éléments des pages Web sont tous définis dans une zone rectangulaire.
Toutefois, cela ne signifie pas que nous devons tout faire pour ressembler à une boîte.
Vous pouvez utiliser la propriété CSS clip-path pour couper des parties d'une image ou d'un autre élément afin de créer des effets intéressants.
Dans l'exemple ci-dessus, l'image de l'infobulle est carrée (source).
En utilisant clip-path et la valeur de forme de base de circle(), le ciel supplémentaire autour du ballon est tronqué, laissant une image circulaire sur la page.
Comme l'image est un lien, vous pouvez voir d'autres informations concernant la propriété clip-path.
Vous ne pouvez cliquer que sur la zone visible de l'image, car les événements ne se déclenchent pas sur les parties masquées de l'image.
Le rognage peut s'appliquer à n'importe quel élément HTML, et pas seulement aux images.
Il existe plusieurs façons de créer un clip-path. Dans cet article, nous les examinerons.
Compatibilité du navigateur
Pour les anciens navigateurs, une solution de remplacement peut permettre au navigateur d'ignorer la propriété clip-path et d'afficher l'image non rognée.
Si cela pose problème, vous pouvez tester clip-path dans une demande de fonctionnalité et proposer une autre mise en page pour les navigateurs non compatibles.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Formes de base
La propriété clip-path peut accepter un certain nombre de valeurs.
La valeur utilisée dans l'exemple initial était circle().
Il s'agit de l'une des valeurs de forme de base, définies dans la spécification des formes CSS.
Cela signifie que vous pouvez rogner une zone et utiliser la même valeur pour shape-outside pour que le texte enveloppe cette forme.
Voici la liste complète des formes de base:
inset()
La valeur inset() insère la zone rognée à partir du bord de l'élément et peut être transmise à des valeurs pour les bords supérieur, droit, inférieur et gauche.
Vous pouvez également ajouter un border-radius pour arrondir les angles de la zone rognée à l'aide du mot clé round.
Dans mon exemple, j'ai deux encadrés avec tous deux une classe de .box.
La première zone n'est pas rognée, la seconde est rognée à l'aide de valeurs inset().
circle()
Comme vous l'avez vu, la valeur circle() crée une zone rognée circulaire.
La première valeur est une longueur ou un pourcentage et correspond au rayon du cercle.
Une deuxième valeur facultative vous permet de définir le centre du cercle.
Dans l'exemple ci-dessous, j'utilise des valeurs de mots-clés pour placer mon cercle rogné en haut à droite.
Vous pouvez également utiliser des longueurs ou des pourcentages.
Faites attention aux bords plats !
Attention, pour toutes ces valeurs, la forme est rognée dans la marge de l'élément. Si vous créez un cercle sur une image et que cette forme s'étend en dehors de la taille naturelle de l'image, vous obtenez un bord plat.
circle(50%) est désormais appliqué à l'image utilisée précédemment. Comme l'image n'est pas carrée, nous appuyons sur les bords situés en haut et en bas, et le cercle est tronqué.ellipse()
Une ellipse est essentiellement un cercle écrasé. Elle se comporte comme une valeur circle(), mais accepte un rayon pour x et un rayon pour y, plus la valeur du centre de l'ellipse.
polygon()
La valeur polygon() peut vous aider à créer des formes assez complexes, définissant autant de points que nécessaire, en définissant les coordonnées de chaque point.
Pour vous aider à créer des polygones et découvrir les possibilités qui s'offrent à vous, découvrez Clippy, un générateur clip-path, puis copiez et collez le code dans votre propre projet.
Formes à partir des valeurs de zone
Les formes CSS sont également définies à partir de valeurs "box".
Il s'agit du modèle "CSS Box", c'est-à-dire la zone de contenu, la zone de marge intérieure, la zone de bordure et la zone de marge avec les valeurs de mots clés content-box, border-box, padding-box et margin-box.
Ces valeurs peuvent être utilisées seules ou avec une forme de base pour définir la zone de référence utilisée par la forme. L'exemple suivant permet de rogner la forme au bord du contenu.
.box {
clip-path: content-box;
}
Dans cet exemple, le cercle utilise content-box comme zone de référence plutôt que margin-box (qui est la valeur par défaut).
.box {
clip-path: circle(45%) content-box;
}
Actuellement, les navigateurs ne sont pas compatibles avec l'utilisation de valeurs "box" pour la propriété clip-path.
Elles sont toutefois compatibles avec shape-outside.
Utilisation d'un élément SVG
Pour mieux contrôler la zone rognée qu'avec les formes de base, utilisez un élément SVG clipPath.
Ensuite, référencez cet ID en utilisant url() comme valeur pour clip-path.
Animer la zone rognée
Vous pouvez appliquer des transitions et des animations CSS au clip-path pour créer des effets intéressants.
Dans l'exemple suivant, j'anime un cercle lorsque l'utilisateur pointe dessus en passant d'un cercle à un autre dont le rayon est différent.
Il existe de nombreuses façons créatives d'utiliser l'animation avec le découpage. Voici quelques idées pour créer des animations avec clip-path dans les astuces CSS.
Photo par Matthew Henry sur Burst.