Koncepcja obcinania i maskowania jest dość prosta. Ukryj określone części elementów i pokaż inne. Faktyczna różnica między nimi jest również dość prosta. Przycinanie jest zawsze ścieżką wektorową, gdzie wewnątrz ścieżki jest widoczne, a na zewnątrz nie. Tam, gdzie maska jest obrazem, jest traktowany jako obraz w skali szarości, gdzie czarne części maskują obraz do przezroczystości, a białe części przepuszczają obraz.
Implementacja obcinania i maskowania nie jest jednak szczególnie łatwa, ponieważ obsługa przeglądarki (i wszystkich drobnych wejść i wyjść) jest dość zróżnicowana. Próbujemy przejść przez to wszystko w tym screencastie, zmaganiach i tak dalej.
Składnia wszystkich możliwości to:
.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; )Niektóre elementy demonstracyjne, którymi graliśmy w tym filmie, są tutaj i tutaj.
Oto cała masa zasobów na ten temat:
- clip-path tutaj w Almanachu CSS-Tricks
- Obcinanie i maskowanie w CSS
- clip-path na WPD
- clip-path na MDN
- Przycinanie i maskowanie na MDN
- (Przestarzała) Właściwość klipu CSS (Impressive Webs)
- Specyfikacja maskowania CSS
- Maskowanie CSS autorstwa Dirka Schulze
- Przycinanie w CSS i SVG - właściwość i
element clip-path autorstwa Sary Soueidan - Długopisy otagowane clip-path w CodePen
- Dema i obsługa przeglądarek demo Pen by Yoksel
- Maski SVG autorstwa Jakoba Jenkowa
- Badania Alana Greenblatta na temat poziomów obsługi przeglądarek dla funkcji obcinania i maskowania