A nyírás és a maszkolás fogalma meglehetősen egyszerű. Az elemek bizonyos részeit elrejti, és másokat megmutat. A tényleges különbség közöttük is nagyon egyszerű. A nyírás mindig vektoros út, ahol az út belsejében látható, kívül pedig nem. Ahol a maszk kép, szürkeárnyalatos képként kezelik, ahol a fekete részek átlátszóvá varázsolják a képet, a fehér részek pedig átengedik a képet.
A nyírás és a maszkolás megvalósítása azonban nem különösebben egyszerű, mivel a böngésző támogatása (és az összes apró ki- és bekapcsolás) meglehetősen eltérő. Megpróbáljuk végigcsinálni mindezt ebben a képernyőn, küzdelmekben és mindenben.
Az összes lehetőség szintaxisa:
.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; )Néhány demó, amellyel ebben a videóban játszottunk, itt és itt találhatók.
Itt egy csomó forrás található rajta:
- clip-path itt a CSS-Tricks Almanachon
- Nyírás és maszkolás a CSS-ben
- clip-path a WPD-n
- clip-path az MDN-n
- Nyírás és maszkolás az MDN-en
- A (megszűnt) CSS-klip tulajdonság (lenyűgöző webek)
- Specifikáció a CSS maszkolásról
- Dirk Schulze CSS-maszkolása
- CSS és SVG
nyírás - Sara Soueidan tulajdonsága és eleme - Tollak clip-path-el címkézve a CodePen-en
- A demók és a böngésző támogatja a Yoksel Pen bemutatót
- Jakob Jenkov SVG maszkjai
- Alan Greenblatt kutatása a böngésző támogatási szintjeiről a nyírási és maszkolási funkciókhoz