Koncept izrezivanja i maskiranja prilično je jednostavan. Sakrij određene dijelove elemenata i prikaži druge. Stvarna razlika među njima je također prilično jednostavna. Isecanje je uvijek vektorska staza, pri čemu je unutar putanja vidljiva, a izvan puta nije. Tamo gdje je maska slika, tretira se kao slika u sivim tonovima gdje crni dijelovi maskiraju sliku do prozirnosti, a bijeli dijelovi propuštaju sliku.
Provođenje izrezivanja i maskiranja ipak nije osobito jednostavno, jer podrška za preglednik (i svi mali ulasci i izlazi) prilično varira. Pokušavamo i prolazimo kroz sve to u ovom screencastu, borbama i svemu ostalom.
Sintaksa svih moguć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; )Neke od demo stvari s kojima smo se igrali u ovom videu su ovdje i ovdje.
Evo čitave hrpe resursa o tome:
- clip-path ovdje na CSS-trikovima Almanac
- Isecanje i maskiranje u CSS-u
- clip-path na WPD-u
- clip-path na MDN-u
- Isecanje i maskiranje na MDN
- (Zastarelo) svojstvo CSS isječka (impresivne mreže)
- Specifikacije o CSS maskiranju
- CSS maskiranje Dirka Schulzea
- Isecanje u CSS-u i SVG-u - Svojstvo i
element isječka puta Sara Soueidan - Olovke označene putem clip-a na CodePenu
- Demo i podrška za preglednike demo Pen by Yoksel
- SVG maske Jakoba Jenkova
- Istraživanje Alana Greenblatta na razinama podrške preglednika za izrezivanje i maskiranje značajki