Концепція відсікання та маскування досить проста. Сховати певні частини елементів і показати інші. Фактична різниця між ними також досить проста. Відсікання - це завжди векторний шлях, де всередині шляху видно, а за межами шляху немає. Де маска - це зображення, трактується як зображення у градаціях сірого, де чорні частини маскують зображення до прозорості, а білі частини пропускають зображення.
Здійснити відсікання та маскування, проте, не особливо просто, оскільки підтримка браузера (і всі маленькі входи та виходи) досить різна. Ми намагаємось пройти все це в цьому скринкасті, боротьбі та усьому.
Синтаксис усіх можливостей такий:
.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; )Деякі демонстраційні матеріали, з якими ми грали у цьому відео, є тут і тут.
Ось ціла купа ресурсів:
- clip-path тут, у альманасі CSS-Tricks
- Відсікання та маскування в CSS
- кліп-шлях на WPD
- кліп-шлях на MDN
- Відсікання та маскування на MDN
- Властивість кліпу CSS (застаріле) (вражаючі веб-сайти)
- Специфікація CSS Masking
- Маскування CSS Дірка Шульце
- Відсікання в CSS та SVG - Властивість та
елемент кліпу шляху Сари Суейдан - Ручки з міткою кліп-шлях на CodePen
- Демонстраційні програми та підтримка браузера демонстраційна версія Pen від Yoksel
- SVG Маски Якоба Єнькова
- Дослідження Алана Грінблатта щодо рівнів підтримки браузера для відсікання та маскування функцій