Концепция обрезки и маскирования довольно проста. Скрыть одни части элементов и показать другие. Фактическая разница между ними тоже довольно проста. Отсечение всегда является векторным путем, при этом внутренняя часть пути видна, а внешняя - нет. Если маска представляет собой изображение, она рассматривается как изображение в градациях серого, где черные части маскируют изображение до прозрачности, а белые части пропускают изображение.
Однако реализовать обрезку и маскирование не так-то просто, поскольку поддержка браузером (и все мелкие детали) сильно различается. Мы пытаемся пройти через все это в этом скринкасте, борьбу и все такое.
Синтаксис для всех возможностей:
.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
- clip-path на MDN
- Обрезка и маскирование на MDN
- Свойство CSS Clip (устарело) (Impressive Webs)
- Спецификация CSS-маскирования
- CSS Masking от Дирка Шульце
- Отсечение в CSS и SVG - свойство и
элемент clip-path, автор Сара Суейдан - Ручки с тегами clip-path на CodePen
- Демо-версии и демо-версия поддержки браузера Pen от Yoksel
- SVG-маски Якоба Дженкова
- Исследование Алана Гринблатта об уровнях поддержки браузерами функций обрезки и маскирования