Le concept de découpage et de masquage est assez simple. Masquez certaines parties des éléments et montrez-en d'autres. La différence réelle entre eux est également assez simple. Le découpage est toujours un chemin vectoriel, où l'intérieur du chemin est visible et l'extérieur du chemin ne l'est pas. Lorsqu'un masque est une image, il est traité comme une image en niveaux de gris où les parties noires masquent l'image en transparence et les parties blanches laissent passer l'image.
L'implémentation du découpage et du masquage n'est cependant pas particulièrement facile, car la prise en charge du navigateur (et tous les petits tenants et aboutissants) est assez variable. Nous essayons de parcourir tout cela dans ce screencast, des luttes et tout.
La syntaxe de toutes les possibilités est:
.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* Masking */ /* mask-image, mask-position, mask-repeat, mask-clip, mask-size… */ mask: url(mask.svg); mask-type: luminance || alpha; -webkit-mask-box-image: url(stampTiles.svg) 30 repeat; mask-border: url(stampTiles.svg) 30 repeat; )Certaines des démos avec lesquelles nous avons joué dans cette vidéo sont ici et ici.
Voici tout un tas de ressources à ce sujet:
- clip-path ici sur l'almanach CSS-Tricks
- Détourage et masquage en CSS
- clip-path sur WPD
- clip-path sur MDN
- Détourage et masquage sur MDN
- La propriété CSS Clip (obsolète) (Impressive Webs)
- Spécifications sur le masquage CSS
- Masquage CSS par Dirk Schulze
- Clipping en CSS et SVG - La propriété et l'
élément clip-path par Sara Soueidan - Pens marqué clip-path sur CodePen
- Démos et support du navigateur Démo Pen by Yoksel
- Masques SVG par Jakob Jenkov
- Recherche d'Alan Greenblatt sur les niveaux de prise en charge des navigateurs pour les fonctionnalités de détourage et de masquage