Konsep kliping dan masking cukup mudah. Sembunyikan bahagian elemen tertentu dan tunjukkan yang lain. Perbezaan sebenar antara mereka juga cukup mudah. Keratan selalu merupakan jalan vektor, di mana jalan itu kelihatan dan di luar jalan tidak. Di mana topeng adalah gambar, diperlakukan sebagai gambar skala abu-abu di mana bahagian hitam menutupi gambar menjadi telus dan bahagian putih membiarkan gambar itu masuk.
Melaksanakan pemotongan dan penyamaran tidak begitu mudah, kerana sokongan penyemak imbas untuknya (dan semua selok-belok kecil) agak berbeza. Kami mencuba dan menjalani semuanya dalam screencast, perjuangan dan semua ini.
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 perkara demo yang kami mainkan dalam video ini ada di sini dan di sini.
Inilah sejumlah sumber di dalamnya:
- clip-path di sini di CSS-Tricks Almanac
- Keratan dan Penyamaran dalam CSS
- jalur klip di WPD
- jalur klip di MDN
- Keratan dan pelindung pada MDN
- Harta Klip CSS (yang tidak digunakan lagi) (Web Mengesankan)
- Spesifikasi mengenai CSS Masking
- CSS Masking oleh Dirk Schulze
- Keratan dalam CSS dan SVG - Harta klip dan
Elemen oleh Sara Soueidan - Jalur klip yang diberi tag pada CodePen
- Demo dan penyokong penyokong demo Pen oleh Yoksel
- Masker SVG oleh Jakob Jenkov
- Penyelidikan Alan Greenblatt mengenai tahap sokongan penyemak imbas untuk memotong dan menyembunyikan ciri