Il concetto di ritaglio e mascheramento è piuttosto semplice. Nascondi alcune parti degli elementi e mostrane altre. Anche l'effettiva differenza tra loro è piuttosto semplice. Il ritaglio è sempre un tracciato vettoriale, dove all'interno è visibile e all'esterno il tracciato non lo è. Dove una maschera è un'immagine, viene trattata come un'immagine in scala di grigi in cui le parti nere mascherano l'immagine in trasparenza e le parti bianche lasciano passare l'immagine.
L'implementazione del ritaglio e del mascheramento non è particolarmente facile, poiché il supporto del browser per esso (e tutti i piccoli dettagli) è abbastanza variabile. Cerchiamo di passare attraverso tutto questo in questo screencast, lotte e tutto.
La sintassi per tutte le possibilità è:
.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; )Alcune delle demo con cui abbiamo giocato in questo video sono qui e qui.
Ecco un sacco di risorse su di esso:
- clip-path qui nel CSS-Tricks Almanac
- Ritaglio e mascheramento in CSS
- clip-path su WPD
- clip-path su MDN
- Ritaglio e mascheratura su MDN
- La proprietà CSS Clip (obsoleta) (Web impressionanti)
- Specifiche sul mascheramento CSS
- Mascheramento CSS di Dirk Schulze
- Ritaglio in CSS e SVG - La proprietà e l'
elemento clip-path di Sara Soueidan - Le penne hanno contrassegnato il percorso della clip su CodePen
- Demo e supporto per browser demo Pen di Yoksel
- Maschere SVG di Jakob Jenkov
- La ricerca di Alan Greenblatt sui livelli di supporto del browser per le funzioni di ritaglio e mascheramento