Leikkaamisen ja peittämisen käsite on melko yksinkertainen. Piilota tietyt elementtien osat ja näytä muita. Todellinen ero niiden välillä on myös melko yksinkertainen. Leikkaus on aina vektorireitti, jossa polun sisällä näkyy ja polun ulkopuolella ei. Jos naamio on kuva, sitä käsitellään harmaasävykuvana, jossa mustat osat peittävät kuvan läpinäkyvyydeksi ja valkoiset osat päästävät kuvan läpi.
Leikkaamisen ja peittämisen toteuttaminen ei kuitenkaan ole erityisen helppoa, koska selaimen tuki sille (ja kaikille pienille sisään- ja ulospäin) on melko erilainen. Yritämme käydä läpi kaikki se tässä kuvaruudussa, kamppailuissa ja kaikessa.
Kaikkien mahdollisuuksien syntaksi on:
.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; )Jotkut tässä videossa pelatuista demotavaroista ovat täällä ja täällä.
Tässä on koko joukko resursseja:
- leikepolku täällä CSS-Tricks Almanacissa
- Leikkaaminen ja peittäminen CSS: ssä
- leikepolku WPD: llä
- leikepolku MDN: ssä
- Leikkaaminen ja peittäminen MDN: llä
- (Vanhentunut) CSS-leikkeen ominaisuus (vaikuttavat verkot)
- CSS-peittämisen tiedot
- Dirk Schulzen CSS-naamiointi
- CSS: n ja SVG: n leikkaus -
Sara Soueidanin leikepolku Property and Element - Kynät, jotka on merkitty leikepolulle CodePenissä
- Demot ja selaimet tukevat Yokselin esittelykynää
- Jakob Jenkovin SVG-naamiot
- Alan Greenblattin tutkimus selaimen tukitasoista leikkaus- ja peittämistoiminnoille