Begrebet klipning og maskering er ret simpelt. Skjul bestemte dele af elementer og vis andre. Den faktiske forskel mellem dem er også ret enkel. Klipning er altid en vektorsti, hvor inde i stien er synlig og udenfor stien ikke er. Hvor en maske er et billede, behandles som et gråtonebillede, hvor de sorte dele maskerer billedet til gennemsigtighed, og de hvide dele slipper billedet igennem.
Implementering af klipning og maskering er dog ikke særlig let, da browserstøtten til det (og alle de små ind-og-ud) er ret forskellig. Vi prøver at gennemgå det hele i denne screencast, kampe og alt.
Syntaksen for alle mulighederne 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; )Nogle af de demo-ting, vi spillede med i denne video, er her og her.
Her er en hel masse ressourcer på det:
- klip-sti her på CSS-Tricks Almanac
- Klipning og maskering i CSS
- klip-sti på WPD
- klip-sti på MDN
- Klipning og maskering på MDN
- Den (forældede) CSS-klipegenskab (imponerende webs)
- Specifikation for CSS-maskering
- CSS Masking af Dirk Schulze
- Klipning i CSS og SVG -
Klipstien Property and Element af Sara Soueidan - Kuglepen tagget klipsti på CodePen
- Demoer og browser understøtter demo Pen fra Yoksel
- SVG Masker af Jakob Jenkov
- Alan Greenblatts forskning om browsersupportniveauer til klipning og maskeringsfunktioner