Comprendre Clip Path

La propriété Clip-Path de CSS est un super outil pour réaliser des effets de style. Dans cet article clair, Drew Minns présente son utilisation en détail, ainsi qu'un cas pratique.

Par

Ce qui est bien quand on enseigne, c’est que les étudiants arrivent toujours avec de nouvelles idées. L’un d’eux voulait reproduire un effet observé sur Squarespace, où une div semble entaillée :

navigation, l’onglet sélectionné semble porter une entaille

Sachant que son niveau lui permettait de comprendre le HTML et CSS du site, je me suis lancé avec elle dans la réalisation de cet effet. Ce découpage de la nav n’est pas si facile, ma première idée était de créer une image aux dimensions de l’entaille et de l’intégrer avec ::after, mais ce n’est pas très responsif et pas aisé à gérer.

Clip Path entre en scène

La propriété CSS clip-path permet de cacher des portions d’un élément via le masquage (masking) et le découpage, ou détourage (clipping). Elle n’est pas encore supportée par certains navigateurs (Firefox et IE, faites un p’tit effort...), mais c’est un super outil pour réaliser des effets de style sur les navigateurs Webkit.

Note : nous devons encore utiliser le préfixe constructeur -webkit pour ces navigateurs ( NdT : et pour cela n’oubliez pas Autoprefixer ).

image
L’image qui nous servira de base pour nos découpages.

En bref, la façon dont la propriété fonctionne est simple : on fournit une série de valeurs X et Y pour créer un chemin. Ces valeurs, une fois un chemin complet créé, découpent l’image située à l’intérieur.

Nous pouvons créer de nombreuses formes différentes à partir de cercles, d’ellipses, de polygones. La créativité est la seule limite.

Un triangle simple

L’effet ci-dessus est obtenu en utilisant simplement un élément et en lui appliquant un clip-path.

//CSS
.clipClass {
   -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

Whoa, détaillons tout ça

De la même façon que pour la propriété position, nous devons penser en termes de valeurs X et Y. X:0 et Y:0 sont situés dans le coin supérieur gauche de l’élément. X:100% signifie qu’on a atteint le côté droit et Y:100% le bas.

Ok, cool. Donc le chemin que nous venons de créer utilise les points suivants :

x: 0, y:100%
x: 50%, y: 0
x: 100%, y: 100%

Un chemin simple, qui part du bas à gauche, se déplace horizontalement jusqu’à la moitié de l’espace (50%), puis monte jusqu’en haut (0) pour atteindre le 2e point, puis va tout à fait à droite horizontalement et en bas, pour atteindre le 3e point : 3 points = un triangle !

Tout ce qui ne se trouve pas à l’intérieur de ces limites est simplement découpé et n’apparaît pas. L’élément lui-même garde ses dimensions, bien que le mode de présentation ait changé.

Formes

Dans ce premier exemple, nous avons utilisé un polygone pour créer une forme et définir un chemin en créant des paires x et y, séparées par des virgules. Mais nous pouvons travailler avec différentes formes, qui prennent des valeurs différentes.

Cercles

Pour créer des cercles, nous passons trois valeurs. L’axe des x et des y nous donne les coordonnées du centre du cercle, et le rayon définit sa taille. La syntaxe est la suivante : “dimension du rayon (at) coordonnées du centre” :

//CSS
.clipClass {
  -webkit-clip-path: circle(50% at 50% 50%);
}

Ellipses

Si vous préférez une forme oblongue, vous pouvez choisir l’ellipse. Pour celle-ci, vous devez fournir quatre valeurs, une valeur sur l’axe des x, une sur l’axe des y, et les deux valeurs correspondant au centre. Ici encore, les coordonnées du centre sont précédées du mot-clé “at” :

//CSS
.clipClass {
  -webkit-clip-path: ellipse(30% 20% at 50% 50%);
}

Inset

(attention, il y a quelques bugs sur les versions anciennes de Chrome)

Si les angles aigus des polygones ne vous plaisent pas et que vous souhaitez créer des rectangles arrondis, utilisez les valeurs “inset”. Inset prend quatre valeurs, correspondant aux positions haut, droit, bas, gauche et permet l’utilisation d’un rayon sur chacune de ces valeurs.

//CSS
.clipClass {
  -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
}

Ce qui se lit comme :

inset(<haut> <droit> <bas> <gauche> round <rayon-haut> <rayon-droit> <rayon-bas> <rayon-gauche>)

Un peu long ? Bonne nouvelle, il y a un raccourci :

//CSS
.clipClass {
  -webkit-clip-path: inset(25% 0 round 0 25%);
}

Références rapides :

Cercle : circle(rayon at x y)

Ellipse : ellipse(rayon-x rayon-y at x y)

Polygone : polygon(x y, x y, ...)

Inset : inset(haut droit bas gauche round rayon-haut rayon-droit rayon-bas rayon-gauche)

Créer des formes

Les cercles et les formes utilisant les rayons sont limités à quelques valeurs, par conséquent les polygones sont souvent un meilleur choix pour créer des formes complexes. Comme nous pouvons définir autant de points que nous le voulons, nous pouvons découper notre élément dans des formes très variées.

Bulle de bande dessinée

//CSS
.clipClass {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Étoile

//CSS
.clipClass {
  -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
}

Animation

Maintenant que nous maîtrisons mieux les formes et la façon de les produire, nous pouvons nous amuser à créer des effets.

Nous pouvons par exemple avoir une forme qui s’applique au survol, en utilisant une propriété transition pour créer un effet en douceur. Cependant, nous devons garder à l’esprit qu’il nous faut créer un état initial par défaut, utilisant les mêmes points que ceux qui nous serviront pour notre état modifié.

//CSS
.animateClass {
  -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
  transition: -webkit-clip-path 0.5s;
}
.animateClass:hover {
  -webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

Utilisation en production

La compatibilité de clip-path étant aujourd’hui limitée aux navigateurs Webkit, la prudence s’impose. Toutefois, si vous voulez explorer certains effets, Chrome et d’autres navigateurs tels que Safari sont tout de même très largement utilisés.

Retour à notre tâche initiale

Tout ceci parce que nous voulions recréer la navigation Squarespace, vous vous rappelez ? Eh bien maintenant, si nous utilisons le positionnement pour recouvrir un élément par un autre, puis que nous utilisons clip-path pour masquer l’image, nous pouvons simplement montrer l’image de background sans avoir à appliquer de techniques complexes de remplacement d’images.

See the Pen vEZOeq by Drew Minns (@drewminns) on CodePen.

Je ne sais pas ce que vous en pensez, mais je trouve que l’avenir est de plus en plus géométrique.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Articles sur les mêmes thèmes dans la Cascade :

Masquer et détourer en CSS, par Chris Coyier
Combiner CSS clip-path et Shapes, par Dudley Storey


original paru le dans Medium.

Sur l’auteur : est spécialiste d’UX/UI, designer, développeur et professeur. On peut suivre ses articles sur Medium, le retrouver sur son site, sur Twitter, Facebook, Instagram, Dribbble, Codepen.

Traduit avec l’aimable autorisation de Medium et de l’auteur.
Copyright Drew Minns © 2015.