Clip-path - Astuces CSS

Table des matières

La clip-pathpropriété en CSS vous permet de spécifier une région spécifique d'un élément à afficher, le reste étant masqué (ou «découpé»).

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Il y avait une clippropriété, mais notez qu'elle est obsolète.

Le cas d'utilisation le plus courant serait une image, mais ce n'est pas limité à cela. Vous pouvez tout aussi bien appliquer clip-pathà une balise de paragraphe et uniquement à une partie du texte.

 

 I'll be clipped.

Ces quatre valeurs dans inset()(dans le CSS ci-dessus) représentent le point haut / gauche et le point bas / droite , qui forme le rectangle visible. Tout ce qui se trouve en dehors de ce rectangle est caché.

Cette image de Louis Lazaris explique très bien les quatre points de l' ancienne clip: rect();syntaxe .

Autres valeurs possibles:

.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 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Exemple de chemin de clip SVG:

C'est très étrange de clip-pathne pas prendre en charge la path()fonction hors de la porte, car path()c'est déjà une chose pour des propriétés comme motion-path. Firefox en a maintenant le support, et nous attendons le reste des navigateurs. Voir une implémentation initiale de clip-path: path ();

Faire votre propre

Jusqu'à ce que nous puissions utiliser de manière fiable path(), les clips les plus utiles pour les formes personnalisées fantaisie sont polygon(). Voici un éditeur vraiment soigné pour ceux de Mads Stoumann (qui fonctionne également pour les cercles et les ellipses):

Plus d'information

  • Détourage et masquage en CSS
  • clip-path sur WPD
  • clip-path sur MDN
  • Clippy: le créateur de chemins de clip de Bennett Feely
  • 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

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
91 54 Non 88 TP *

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 14,0-14,4 *

Articles intéressants...