Концепт исецања и маскирања прилично је једноставан. Сакриј одређене делове елемената и прикажи друге. Стварна разлика између њих је такође прилично једноставна. Исецање је увек векторска путања, где је унутрашњост пута видљива, а изван путања није. Тамо где је маска слика, третира се као слика у сивим тоновима где црни делови маскирају слику до прозирности, а бели делови пропуштају слику.
Примена исецања и маскирања ипак није нарочито лако, јер подршка прегледача за њу (и сви мали улази и излази) прилично варира. Покушавамо да прођемо кроз све то у овом сцреенцаст-у, борбама и свему осталом.
Синтакса свих могућности је:
.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; )Неке од демо ствари са којима смо се играли у овом видеу су овде и овде.
Ево читаве гомиле ресурса о томе:
- цлип-патх овде на ЦСС-Трицкс Алманац
- Исецање и маскирање у ЦСС-у
- цлип-патх на ВПД-у
- цлип-патх на МДН
- Исецање и маскирање на МДН
- (Застарело) својство ЦСС исечка (импресивне мреже)
- Спецификације о ЦСС маскирању
- ЦСС маскирање Дирка Сцхулзеа
- Исецање у ЦСС-у и СВГ-у - Својство и
елемент клипове пута Сара Соуеидан - Оловке су на ЦодеПен-у означиле пут за исечак
- Демо и подршка за прегледаче демо Пен би Иоксел
- СВГ маске Јакоба Јенкова
- Истраживање Алана Греенблатта о нивоима подршке прегледача за функције исецања и маскирања