Kirpimo ir maskavimo samprata yra gana paprasta. Slėpti tam tikras elementų dalis ir parodyti kitiems. Tikrasis skirtumas tarp jų taip pat yra gana paprastas. Karpymas visada yra vektorinis kelias, kai kelio vidus yra matomas, o už kelio - ne. Kai kaukė yra vaizdas, tai traktuojama kaip pilkos spalvos vaizdas, kai juodos dalys maskuoja vaizdą skaidriai, o baltos - praleidžia vaizdą.
Tačiau kirpimas ir užmaskavimas nėra ypač lengvas, nes naršyklės palaikymas (ir visos mažos įžvalgos) yra labai skirtingos. Mes bandome ir išgyvename visa tai šioje ekrano kopijoje, kovose ir viskuo.
Visų galimybių sintaksė yra tokia:
.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; )Kai kurie demonstraciniai elementai, su kuriais grojome šiame vaizdo įraše, yra čia ir čia.
Čia yra visa krūva išteklių:
- „clip-path“ čia, CSS-Tricks almanache
- Karpymas ir maskavimas CSS
- klipų kelias WPD
- įrašo kelias MDN
- Iškirpti ir užmaskuoti MDN
- (Nebenaudojama) CSS klipo ypatybė (įspūdingi žiniatinkliai)
- Specifikacija CSS maskavimui
- Dirk Schulze CSS maskavimas
Karpymas CSS ir SVG - Sara Soueidan klipo kelias „Property and Element“- Rašikliai, pažymėti klipo keliu „CodePen“
- Demonstracijos ir naršyklė palaiko „Yoksel“ rašomąją „Pen“ versiją
- Jakobo Jenkovo „SVG kaukės“
- Alano Greenblatto tyrimai apie naršyklės palaikymo lygius karpymo ir maskavimo funkcijoms