Концепцията за изрязване и маскиране е доста проста. Скриване на определени части от елементи и показване на други. Действителната разлика между тях също е доста проста. Изрязването винаги е векторна пътека, където вътрешността на пътя е видима, а извън нея не е. Когато маската е изображение, се третира като изображение в сиво, при което черните части маскират изображението до прозрачност, а белите части пропускат изображението.
Прилагането на изрязване и маскиране обаче не е особено лесно, тъй като поддръжката на браузъра за него (и всички малки входове и изходи) е доста различна. Опитваме се да преминем през всичко това в този скрийнкаст, борби и всичко останало.
Синтаксисът за всички възможности е:
.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 Almanac
- Изрязване и маскиране в CSS
- clip-path на WPD
- clip-path на MDN
- Изрязване и маскиране на MDN
- (Оттеглено) свойство CSS Clip (впечатляващи мрежи)
- Спецификация за CSS маскиране
- CSS маскиране от Dirk Schulze
- Изрязване в CSS и SVG - Свойството и
елементът на клип-пътя от Сара Суейдан - Писалки, маркирани с път на клип на CodePen
- Демонстрации и поддръжка на браузър демо от Pen от Yoksel
- SVG Маски от Якоб Йенков
- Изследване на Алън Грийнблат относно нивата на поддръжка на браузъра за изрязване и маскиране на функции