Konseptet med klipping og maskering er ganske enkelt. Skjul visse deler av elementene og vis andre. Den faktiske forskjellen mellom dem er også ganske enkel. Klipping er alltid en vektorbane, der inne er banen synlig og utenfor banen ikke er. Hvor en maske er et bilde, behandles som et gråtonebilde der de svarte delene maskerer bildet til gjennomsiktighet og de hvite delene slipper bildet gjennom.
Implementering av klipping og maskering er ikke spesielt enkelt, siden nettleserstøtten for det (og alle de små inn-og-ut) er ganske varierende. Vi prøver å gå gjennom alt dette i denne skjermkastingen, kamper og alt.
Syntaksen for alle mulighetene er:
.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; )Noen av demostingene vi spilte med i denne videoen er her og her.
Her er en hel haug med ressurser på det:
- klippesti her på CSS-Tricks Almanac
- Klipping og maskering i CSS
- klippesti på WPD
- klippesti på MDN
- Klipping og maskering på MDN
- Den (utfasede) CSS Clip Property (imponerende nett)
- Spesifikasjon på CSS Masking
- CSS Masking av Dirk Schulze
- Clipping in CSS and SVG - The clip-path Property and
Element av Sara Soueidan - Penner merket klippesti på CodePen
- Demoer og nettleser støtter demo Pen fra Yoksel
- SVG Masks av Jakob Jenkov
- Alan Greenblatts forskning om nettleserstøttenivåer for klipping og maskeringsfunksjoner