Koncept orezávania a maskovania je dosť jednoduchý. Skryť určité časti prvkov a ukázať ďalšie. Skutočný rozdiel medzi nimi je tiež dosť jednoduchý. Orezanie je vždy vektorová cesta, kde vo vnútri cesty je viditeľná a mimo cestu nie. Ak je maskou obrázok, zaobchádza sa s ním ako s obrázkami v odtieňoch sivej, kde čierne časti maskujú obrázok na priehľadnosť a biele časti ho prepúšťajú.
Implementácia orezávania a maskovania nie je však nijak zvlášť ľahká, pretože podpora prehľadávača (a všetkých drobných vstupov a výstupov) sa veľmi líši. Snažíme sa prejsť tým všetkým v tomto vysielaní, zápasmi a všetkým.
Syntax všetkých možností je:
.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; )Niektoré ukážky, s ktorými sme hrali v tomto videu, sú tu a tu.
Tu je veľa zdrojov:
- klipová cesta tu v almanachu CSS-Tricks
- Orezávanie a maskovanie v CSS
- clip-path na WPD
- clip-path na MDN
- Orezávanie a maskovanie na MDN
- (Zastaraná) vlastnosť klipu CSS (pôsobivé weby)
- Spec on CSS Masking
- CSS Masking od Dirka Schulzeho
- Clipping in CSS and SVG - The Clip-path Property and
Element od Sary Soueidan - Perá označili príchytku na CodePen
- Ukážky a podpora prehliadača, demo Pen od spoločnosti Yoksel
- Masky SVG od Jakoba Jenkova
- Výskum Alana Greenblatta o úrovniach podpory prehľadávačov pre funkcie orezávania a maskovania