Créez des formes d'images intéressantes avec la propriété "clip-path" de CSS

L’utilisation de la découpe en CSS peut nous aider à nous éloigner de tout dans nos conceptions qui ressemblent à une boîte. En utilisant différentes formes de base, ou SVG, vous pouvez créer un chemin de découpe. Supprimez ensuite les parties d'un élément que vous ne souhaitez pas afficher.

Rachel Andrew

Les éléments des pages Web sont tous définis dans un cadre rectangulaire. Toutefois, cela ne signifie pas que nous devons tout faire ressembler à une boîte. Vous pouvez utiliser la propriété CSS clip-path pour dé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 du ballon est carrée (source). En utilisant clip-path et la valeur de forme de base circle(), le ciel supplémentaire autour du ballon est rogné, laissant une image circulaire sur la page.

Comme l'image est un lien, vous pouvez voir autre chose concernant la propriété clip-path. Seule la zone visible de l'image peut être cliquée, car les événements ne se déclenchent pas sur les parties masquées de l'image.

Le recadrage peut être appliqué à 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 allons les examiner.

Compatibilité du navigateur

Pour les anciens navigateurs, vous pouvez autoriser le navigateur à ignorer la propriété clip-path et à afficher l'image non rognée. Si c'est le cas, vous pouvez tester clip-path dans une requête de fonctionnalités 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 prendre plusieurs 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 découper une zone et utiliser la même valeur pour shape-outside afin que le texte s'enroule autour de cette forme.

Voici la liste complète des formes de base :

• inset()
• circle()
• ellipse()
• polygon()

inset()

La valeur inset() insère la zone rognée par rapport au bord de l'élément et peut transmettre des valeurs pour les bords supérieur, droit, inférieur et gauche. Vous pouvez également ajouter un border-radius pour courber les coins de la zone rognée à l'aide du mot clé round.

Dans mon exemple, j'ai deux cases, toutes deux de classe .box. Le premier champ n'est pas rogné, tandis que le second est rogné à l'aide de valeurs inset().

circle()

Comme vous l'avez vu, la valeur circle() crée une zone circulaire délimitée. 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 définir mon cercle rogné en haut à droite. Vous pouvez également utiliser des longueurs ou des pourcentages.

Faites attention aux bords plats !

Sachez que, avec toutes ces valeurs, la forme sera tronquée par la zone de marge de l'élément. Si vous créez un cercle sur une image et que cette forme s'étend au-delà de la taille naturelle de l'image, vous obtiendrez un bord plat.

ellipse()

Une ellipse est essentiellement un cercle écrasé. Elle fonctionne donc très semblablement à circle(), mais accepte un rayon pour x et un rayon pour y, ainsi que la valeur du centre de l'ellipse.

polygon()

La valeur polygon() peut vous aider à créer des formes assez complexes, en 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, consultez Clippy, un générateur de clip-path, puis copiez et collez le code dans votre propre projet.

Formes issues des valeurs de zone

Les formes issues des valeurs de zone sont également définies dans "Formes CSS". Ils font référence au modèle de boîte CSS : la zone de contenu, la zone de marge intérieure, la zone de bordure et la zone de marge extérieure, avec des valeurs de mot clé de content-box, border-box, padding-box et margin-box.

Ces valeurs peuvent être utilisées seules ou parallèlement à une forme de base pour définir la zone de référence utilisée par cette forme. Par exemple, le code suivant découpe la forme au bord du contenu.

.box {
  clip-path: content-box;
}

Dans cet exemple, le cercle utiliserait 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 n'acceptent pas l'utilisation de valeurs de boîte pour la propriété clip-path. Ils sont toutefois compatibles avec shape-outside.

Utiliser un élément SVG

Pour un contrôle plus précis de votre zone rognée que ce qui est possible avec les formes de base, utilisez un élément SVG clipPath. Faites ensuite référence à cet ID en utilisant url() comme valeur pour clip-path.

Animer la zone recadrée

Vous pouvez appliquer des transitions et des animations CSS à clip-path pour créer des effets intéressants. Dans cet exemple, j'anime un cercle lorsque l'utilisateur le pointe en effectuant une transition entre deux cercles avec une valeur de rayon différente.

Vous pouvez utiliser l'animation de nombreuses façons créatives avec le découpage. Animer avec clip-path sur CSS Tricks présente quelques idées.

Photo de Matthew Henry prise avec Rafale.