Konsep clipping dan masking cukup sederhana. Sembunyikan bagian tertentu dari elemen dan tunjukkan yang lain. Perbedaan sebenarnya di antara mereka juga cukup sederhana. Kliping selalu merupakan jalur vektor, di mana jalur di dalam jalur terlihat dan jalur luar tidak terlihat. Dimana topeng adalah gambar, diperlakukan sebagai gambar skala abu-abu di mana bagian hitam menutupi gambar dengan transparansi dan bagian putih membiarkan gambar lewat.
Menerapkan clipping dan masking tidak terlalu mudah, karena dukungan browser untuk itu (dan semua seluk beluk kecil) cukup bervariasi. Kami mencoba dan melalui semua itu di screencast ini, perjuangan dan semuanya.
Sintaks untuk semua kemungkinan adalah:
.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; )Beberapa demo yang kami mainkan dalam video ini ada di sini dan di sini.
Berikut sejumlah sumber daya di dalamnya:
- clip-path di sini di CSS-Tricks Almanac
- Clipping dan Masking di CSS
- clip-path di WPD
- clip-path di MDN
- Clipping dan masking di MDN
- Properti Klip CSS (tidak digunakan lagi) (Web yang Mengesankan)
- Spec tentang CSS Masking
- CSS Masking oleh Dirk Schulze
- Kliping dalam CSS dan SVG - Properti dan
Elemen jalur klip oleh Sara Soueidan - Pena menandai jalur klip pada CodePen
- Demo dan dukungan browser Demo Pen oleh Yoksel
- SVG Masks oleh Jakob Jenkov
- Riset Alan Greenblatt tentang tingkat dukungan browser untuk fitur kliping dan masking