Koncept rezanja in maskiranja je precej preprost. Skrij določene dele elementov in pokaži druge. Dejanska razlika med njima je tudi precej preprosta. Odsek je vedno vektorska pot, kjer je pot znotraj vidna, zunaj pa ne. Kjer je maska slika, se obravnava kot slika v sivinah, kjer črni deli prikrijejo sliko do prosojnosti, beli deli pa jo pustijo skozi.
Izvajanje izrezovanja in maskiranja pa ni posebej enostavno, saj je podpora brskalnika (in vsi majhni vhodi in izstopi) precej različna. Poskušamo iti skozi vse to v tem predvajanju zaslona, bojih in vsem.
Sintaksa vseh možnosti 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; )Nekatere predstavitvene zadeve, s katerimi smo se igrali v tem videu, so tu in tukaj.
Tu je cel kup virov:
- clip-path tukaj v almanahu CSS-Tricks
- Izrezovanje in maskiranje v CSS
- clip-path na WPD
- clip-path na MDN
- Izrez in maskiranje na MDN
- (Zastarela) lastnost izrezka CSS (impresivne spletne strani)
- Specifikacije o maskiranju CSS
- Maskiranje CSS Dirka Schulzeja
- Izrezovanje v CSS in SVG - Lastnost in
element posnetka poti avtorice Sara Soueidan - Peresa so na CodePen označila pot posnetka
- Predstavitve in podpora za brskalnike demo Pen by Yoksel
- SVG Maske Jakoba Jenkova
- Raziskava Alana Greenblatta o stopnjah podpore brskalnikov za izrezovanje in maskiranje funkcij