Das Konzept des Abschneidens und Maskierens ist ziemlich einfach. Verstecke bestimmte Teile von Elementen und zeige andere. Der tatsächliche Unterschied zwischen ihnen ist auch ziemlich einfach. Clipping ist immer ein Vektorpfad, bei dem innerhalb des Pfads sichtbar ist und außerhalb des Pfads nicht. Wenn eine Maske ein Bild ist, wird sie als Graustufenbild behandelt, wobei die schwarzen Teile das Bild transparent maskieren und die weißen Teile das Bild durchlassen.
Das Implementieren von Clipping und Masking ist jedoch nicht besonders einfach, da die Browserunterstützung (und all die kleinen Vor- und Nachteile) sehr unterschiedlich ist. Wir versuchen, alles in diesem Screencast, den Kämpfen und allem durchzugehen.
Die Syntax für alle Möglichkeiten lautet:
.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; )Einige der Demos, mit denen wir in diesem Video gespielt haben, sind hier und hier.
Hier ist eine ganze Reihe von Ressourcen:
- Clip-Pfad hier auf dem CSS-Tricks Almanach
- Ausschneiden und Maskieren in CSS
- Clip-Pfad auf WPD
- Clip-Pfad auf MDN
- Clipping und Masking auf MDN
- Die (veraltete) CSS-Clip-Eigenschaft (beeindruckende Webs)
- Spezifikation zur CSS-Maskierung
- CSS Masking von Dirk Schulze
- Clipping in CSS und SVG - Die Clip-Path-Eigenschaft und das
Element von Sara Soueidan - Stifte markiert den Clip-Pfad auf CodePen
- Demos und Browser unterstützen Demo Pen von Yoksel
- SVG Masken von Jakob Jenkov
- Alan Greenblatts Forschung zu Browser-Unterstützungsstufen für Clipping- und Maskierungsfunktionen