Koncept ořezávání a maskování je docela jednoduchý. Skrýt určité části prvků a ukázat ostatní. Skutečný rozdíl mezi nimi je také docela jednoduchý. Oříznutí je vždy vektorová cesta, kde uvnitř cesty je viditelná a mimo cestu ne. Pokud je maskou obrázek, je s ním zacházeno jako s obrázkem ve stupních šedi, kde černé části maskují obraz na průhlednost a bílé části ho propouštějí.
Implementace ořezávání a maskování není nijak zvlášť snadná, protože podpora prohlížeče (a všechny ty malé vstupy a výstupy) se velmi liší. Snažíme se to všechno projít v tomto screencastu, zápasech a tak.
Syntaxe všech 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; )Některé ukázky, se kterými jsme hráli v tomto videu, jsou tady a tady.
Zde je celá řada zdrojů:
- clip-path zde v almanachu CSS-Tricks
- Ořezávání a maskování v CSS
- clip-path na WPD
- clip-path na MDN
- Ořezávání a maskování na MDN
- (Zastaralá) vlastnost 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 - Pera označená clip-path na CodePen
- Dema a podpora prohlížeče demo Pen od Yoksel
- SVG Masky od Jakoba Jenkova
- Výzkum Alana Greenblatta týkající se úrovní podpory prohlížečů pro funkce ořezávání a maskování