Het concept van knippen en maskeren is vrij eenvoudig. Verberg bepaalde delen van elementen en laat andere zien. Het werkelijke verschil tussen beide is ook vrij eenvoudig. Uitknippen is altijd een vectorpad, waarbij binnen het pad zichtbaar is en buiten het pad niet. Waar een masker een afbeelding is, wordt dit behandeld als een afbeelding in grijstinten, waarbij de zwarte delen de afbeelding maskeren tot transparantie en de witte delen de afbeelding doorlaten.
Het implementeren van knippen en maskeren is echter niet bijzonder eenvoudig, omdat de browserondersteuning ervoor (en alle kleine ins-en-outs) behoorlijk varieert. We proberen het allemaal door te nemen in deze screencast, worstelingen en zo.
De syntaxis voor alle mogelijkheden is:
.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; )Sommige van de demo-dingen waarmee we in deze video hebben gespeeld, zijn hier en hier.
Hier zijn een heleboel bronnen:
- clip-path hier op de CSS-Tricks Almanac
- Knippen en maskeren in CSS
- clip-path op WPD
- clip-path op MDN
- Knippen en maskeren op MDN
- De (verouderde) CSS Clip-eigenschap (indrukwekkende websites)
- Specificatie voor CSS-maskering
- CSS-maskering door Dirk Schulze
- Clipping in CSS en SVG - The clip-path Property and
Element door Sara Soueidan - Pennen getagd met clip-path op CodePen
- Demo's en browserondersteuning demo Pen van Yoksel
- SVG-maskers door Jakob Jenkov
- Alan Greenblatt's onderzoek naar browserondersteuningsniveaus voor knippen en maskeren