Nogriešanas un maskēšanas jēdziens ir diezgan vienkāršs. Paslēpt noteiktas elementu daļas un parādīt citas. Arī faktiskā atšķirība starp tām ir diezgan vienkārša. Nogriešana vienmēr ir vektora ceļš, kur ceļš ir redzams, bet ārpus tā nav. Ja maska ir attēls, to uzskata par pelēktoņu attēlu, kur melnās daļas maskē attēlu caurspīdīgi, un baltās daļas izlaiž attēlu cauri.
Lai gan izgriešana un maskēšana nav īpaši vienkārša, jo pārlūkprogrammas atbalsts (un visi mazie ieejas punkti) ir diezgan atšķirīgi. Mēs to visu izmēģinām un pārdzīvojam šajā ekrāna sūtījumā, cīņās un visā.
Visu iespēju sintakse ir šāda:
.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; )Daži no demonstrācijas materiāliem, ar kuriem mēs spēlējām šajā videoklipā, ir šeit un šeit.
Šeit ir viss ķekars resursu:
- clip-path šeit, CSS-Tricks Almanac
- Nogriešana un maskēšana CSS
- klipu ceļš WPD
- videoklipa ceļš MDN
- Nogriešana un maskēšana uz MDN
- (Novecojis) CSS klipa rekvizīts (iespaidīgi tīmekļi)
- Specifikācija CSS maskēšanai
- Dirka Šulces CSS maskēšana
- CSS un SVG
apgriešana - Sara Soueidan klipu ceļš Īpašums un elements - Pildspalvas ar atzīmi klipu ceļš vietnē CodePen
- Demokrāti un pārlūkprogramma atbalsta Yoksel demonstrācijas pildspalvu
- Jakoba Jenkova SVG maskas
- Alana Grīnblata pētījumi par pārlūka atbalsta līmeņiem apgriešanas un maskēšanas funkcijām