L’utilisation de clip-path pour le site Species in pieces

Aujourd'hui, je vous propose de vous sensibiliser à la disparition d'espèces, de découvrir un site particulièrement impressionnant et d'apprendre une nouvelle façon de dessiner en CSS. Tout ça en un seul article, elle n'est pas belle la vie ?

Species in pieces

Note : Le site ne fonctionne que sur Google Chrome.

Pour sensibiliser le public sur la disparition de 30 espèces animales, le webdesigner Brian James a décidé de les représenter toutes avec les mêmes pièces polygonales, qui changent forcément de forme, position et couleur en passant d'une espèce à une autre.

Ce résultat aurait certainement pu être atteint avec du SVG, mais l'auteur a décidé d'utiliser une technologie différente à base de CSS, bien plus intéressante pour un intégrateur n'ayant aucune notion d'illustrator, inkscape ou autre logiciel de dessin vectoriel : la propriété css clip-path.

Clip-path, ou comment appliquer un masque sur un élément

Clip-path est une propriété qui permet de créer des masques sur n'importe quel élément en position absolute. Il est donc possible de n'afficher que certaines parties (ronds, carrés, ou polygones) d'éléments HTML. Si l'élément est une simple div avec un background, il est effectivement possible de "dessiner" en CSS, et muter ces dessins avec une simple propriété transition.

Je vous ai fait un petit exemple sur Codepen. N'hésitez pas à cliquer le bouton "SASS" pour voir le code CSS !

See the Pen Example de clip-path by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Est-ce que clip-path est mieux que SVG ?

Si l'utilisation de cette technologie est intéressante pour l'exemple, est-elle intéressante pour des sites en production ? Un des gros points négatifs du site est son support uniquement de Webkit (chrome, safari). Est-ce la faute de clip-path ?

Pour comparer les deux technologies au niveau du support navigateur, jettons un oeil à Can I use.

Pour le SVG, pas grand-chose à dire, vert de partout sauf sur IE8 (mais bon, c'est pas sa faute, il est vieux le pauvre).

Pour clip-path, le résultat est bien plus mitigé :

Il est possible de voir qu'en effet, aucun IE ne supporte clip-path, ce qui nous coupe de plus de 20% des internautes français, ce qui n'est pas top, mais il est toujours possible de trouver une dégradation pour ce genre d'effets pas vraiment obligatoire.

Par contre, Can I Use annonce aussi un support de Firefox, il est donc dommage que l'auteur n'ai pas fait l'effort de supporter ce navigateur.