Lõikamise ja maskeerimise mõiste on üsna lihtne. Peitke elementide teatud osad ja näidake teisi. Ka nende tegelik erinevus on üsna lihtne. Lõikamine on alati vektortee, kus tee sees on nähtav ja väljaspool seda pole. Kui mask on pilt, käsitletakse halltoonina, kus mustad osad maskeerivad pildi läbipaistvuseks ja valged osad lasevad pildil läbi.
Lõikamise ja maskeerimise rakendamine pole siiski eriti lihtne, kuna brauseri tugi sellele (ja kõigile väikestele sisse- ja väljapääsudele) on üsna erinev. Proovime ja läbime selle ekraanikuva kõik, võitlused ja kõik.
Kõigi võimaluste süntaks 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; )Mõned demovärgid, millega me selles videos mängisime, on siin ja siin.
Siin on terve rida ressursse:
- clip-path siin CSS-Tricks Almanachis
- Lõikamine ja maskeerimine CSS-is
- clip-path WPD-s
- lõiketee MDN-is
- Lõikamine ja maskeerimine MDN-il
- (Vananenud) CSS-i klipi atribuut (muljetavaldavad veebisaidid)
- CSS-i maskeerimise spetsifikatsioon
- Dirk Schulze CSS-i maskeerimine
- CSS-i ja SVG-i lõikamine -
Sara Soueidani klippitee Property ja Element - Pliiatsid, millel on koodiribal sildistatud klipi tee
- Demod ja brauserid toetavad Yokseli pliiatsi Pen Pen
- Jakob Jenkovi SVG maskid
- Alan Greenblatti uurimine klõpsamise ja maskeerimise funktsioonide brauseri tugitasemete kohta