Begreppet klippning och maskering är ganska enkelt. Dölj vissa delar av element och visa andra. Den faktiska skillnaden mellan dem är också ganska enkel. Klippning är alltid en vektorsökväg, där inuti banan är synlig och utanför banan inte är. Där en mask är en bild, behandlas den som en gråskalebild där de svarta delarna maskerar bilden till transparens och de vita delarna släpper igenom bilden.
Implementering av klippning och maskering är dock inte särskilt lätt, eftersom webbläsarens stöd för det (och alla små in-och-outs) är ganska varierande. Vi försöker gå igenom allt i denna skärmdump, kämpar och allt.
Syntaksen för alla möjligheter är:
.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; )Några av demograderna vi spelade med i den här videon finns här och här.
Här är en hel massa resurser:
- klippspår här på CSS-Tricks Almanac
- Klippning och maskering i CSS
- klippbana på WPD
- klippspår på MDN
- Klippning och maskering på MDN
- (Föråldrad) CSS-klippegenskap (imponerande webbplatser)
- Specifikation för CSS-maskering
- CSS Masking av Dirk Schulze
- Klippning i CSS och SVG - Clip-path Property and
Element av Sara Soueidan - Pennor taggade clip-path på CodePen
- Demos och webbläsare stöder demo Pen från Yoksel
- SVG-masker av Jakob Jenkov
- Alan Greenblatts forskning om webbläsarstödnivåer för klipp- och maskeringsfunktioner