Das Konzept von Clipping und Maskierung ist ziemlich einfach. Verstecken Sie bestimmte Teile von Elementen und zeigen Sie andere an. Der tatsächliche Unterschied zwischen ihnen ist auch ziemlich einfach. Clipping ist immer ein Vektorpfad, bei dem das Innere des Pfads sichtbar ist und das Äußere nicht. Eine Maske ist ein Bild, das als Graustufenbild behandelt wird, bei dem die schwarzen Teile das Bild transparent maskieren und die weißen Teile das Bild durchscheinen lassen.
Die Implementierung von Clipping und Maskierung ist jedoch nicht besonders einfach, da die Browserunterstützung dafür (und all die kleinen Feinheiten) stark variiert. Wir versuchen, alles in diesem Screencast zu behandeln, einschließlich der Schwierigkeiten.
Die Syntax für alle Möglichkeiten ist
.clip-me {
/* referencing path from an inline SVG <clipPath> */
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;
}Einige der Demo-Sachen, mit denen wir in diesem Video gearbeitet haben, sind hier und hier.
Hier ist eine ganze Reihe von Ressourcen dazu
- clip-path hier im CSS-Tricks Almanac
- Clipping und Masking in CSS
- clip-path auf WPD
- clip-path auf MDN
- Clipping und Masking auf MDN
- Die (veraltete) CSS Clip Eigenschaft (Impressive Webs)
- Spezifikation zu CSS Masking
- CSS Masking von Dirk Schulze
- Clipping in CSS und SVG – Die clip-path-Eigenschaft und das
<clipPath>Element von Sara Soueidan - Pens mit dem Tag clip-path auf CodePen
- Demos und Browser-Support-Demo Pen von Yoksel
- SVG Masks von Jakob Jenkov
- Alan Greenblatts Forschung zum Browser-Support-Level für Clipping- und Masking-Funktionen