CSS Masking - mask

Hai there, para pemimpin CSS masa depan! Hari ini, kita akan melihat dunia yang menarik CSS masking. Bayangkan anda adalah seorang ahli sihir, dan anda ingin membuat sebahagian daripada laman web anda hilang atau mendedahkan mereka dalam cara yang menarik. Itu betul apa yang CSS masking membolehkan kita lakukan! Jadi, mari kita pakai topi ahli sihir kita dan belajar beberapa trik CSS!

Apa Itu CSS Masking?

CSS masking adalah seperti menggunakan stensil tak terlihat pada elemen web anda. Ia membolehkan anda menyembunyikan atau menunjukkan sebahagian daripada elemen berdasarkan imej atau bentuk lain. Teknik ini sangat kuat dan dapat mencipta kesan yang benar-benar menarik!

Nilai Yang Mungkin

Sebelum kita mula menulis kod, mari kita lihat nilai yang berbeza yang dapat kita gunakan dengan properti mask. Anggaplah ini sebagai jenis yang berbeza dari tongkat sihir, setiap satu mencipta kesan unik:

Nilai	Keterangan
none	Tiada penapisan yang diterapkan
<mask-reference>	Merujuk ke imej penapisan
<masking-mode>	Menentukan bagaimana penapisan diterapkan
<position>	Menetapkan kedudukan penapisan
<bg-size>	Menentukan saiz penapisan
<repeat-style>	Menentukan bagaimana penapisan berulang
<geometry-box>	Menentukan kotak penapisan
no-clip	Menghalang pemotongan penapisan

Jangan bimbang jika ini masih membingungkan anda sekarang. Kita akan menjelajahi setiap satu dengan contoh!

Diterapkan Pada

Properti mask boleh diterapkan pada mana-mana elemen. Itu seperti memiliki tongkat sihir yang bekerja pada segala-galanya!

Sintaks

Sintaks asas untuk properti mask adalah seperti ini:

.element {
mask: <value>;
}

Sekarang, mari kita lihat nilai setiap satu dalam perincian.

CSS mask - none Value

Nilai none adalah mudah. Ia bermaksud tiada penapisan yang diterapkan. Itu seperti memutuskan untuk tidak menggunakan tongkat sihir anda sama sekali.

.no-mask {
mask: none;
}

Kod ini hanya memberitahu pelayar, "Jangan terapkan penapisan pada elemen ini."

CSS mask - <mask-reference>

Ini adalah di mana magik benar-benar bermula! Sebuah <mask-reference> boleh menjadi imej atau gradiens CSS yang menentukan mana-mana bahagian elemen yang hendak ditunjukkan.

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

Dalam contoh ini, kita menggunakan baik fail imej ('mask.png') atau gradiens linear sebagai penapisan kita. Bahagian hitam penapisan akan menunjukkan elemen, manakala bahagian yang transparent akan menyembunyikannya.

CSS mask - <masking-mode>

Mod penapisan menentukan bagaimana penapisan diterapkan. Ada dua nilai: alpha dan luminance.

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha: Menggunakan kanal alpha penapisan imej.
• luminance: Menggunakan kecerahan penapisan imej.

CSS mask - <position>

Seperti imej latar belakang, anda boleh menetapkan kedudukan penapisan anda:

.positioned-mask {
mask-position: center;
/* atau */
mask: url('mask.png') center;
}

Ini menengahkan penapisan di tengah elemen. Anda boleh menggunakan mana-mana nilai kedudukan CSS sah di sini.

CSS mask - <bg-size>

Anda juga boleh mengawal saiz penapisan anda:

.sized-mask {
mask-size: cover;
/* atau */
mask: url('mask.png') cover;
}

Ini membuat penapisan meliputi keseluruhan elemen. Anda boleh menggunakan dimensi khusus juga, seperti 100px 200px.

CSS mask - <repeat-style>

Jika penapisan anda lebih kecil daripada elemen, anda boleh mengawal bagaimana ia berulang:

.repeating-mask {
mask-repeat: repeat-x;
/* atau */
mask: url('mask.png') repeat-x;
}

Ini mengulangi penapisan secara mendatar di sepanjang elemen.

CSS mask - <geometry-box>

Kotak geometri menentukan kawasan yang penapisan meliputi:

.box-mask {
mask-clip: padding-box;
/* atau */
mask: url('mask.png') padding-box;
}

Ini menerapkan penapisan ke kotak padding elemen.

CSS mask - <geometry-box> | no-clip

Nilai no-clip menghalang penapisan dipotong ke sempadan elemen:

.no-clip-mask {
mask-clip: no-clip;
/* atau */
mask: url('mask.png') no-clip;
}

Ini membolehkan penapisan melampaui sempadan elemen.

CSS mask - Properti Terkait

Ada beberapa properti yang berkaitan dengan mask yang memberikan anda lebih banyak kawalan:

Properti	Keterangan
mask-image	Menentukan imej penapisan
mask-mode	Menetapkan mod penapisan
mask-repeat	Mengawal bagaimana penapisan berulang
mask-position	Menetapkan kedudukan penapisan
mask-clip	Menentukan kawasan lukisan penapisan
mask-origin	Menetapkan asal penapisan
mask-size	Menentukan saiz penapisan
mask-composite	Menentukan bagaimana penapisan dipadankan

Setiap properti ini menyongsong sebahagian daripada properti mask ringkas yang kita gunakan.

Dan begitu, para ahli sihir CSS muda! Anda baru saja belajar dasar CSS masking. Ingat, seperti mana-mana trik sihir, memahami CSS masking memerlukan latihan. Jadi, jangan takut untuk menguji dan mencipta desain web yang menarik!

Dalam tahun pengajaran saya, saya menemui bahawa cara terbaik untuk belajar adalah dengan membuat. Jadi, mari ini adalah latihan yang menyenangkan untuk anda: cuba mencipta kesan "reveal" pada imej menggunakan penapisan gradiens. Buatlah ia sepenuhnya diperlihatkan saat anda mengerakkan tetikus ke atas imej. Itu seperti menarik kain untuk menunjukkan gambar yang disembunyikan!

Selamat berkod, dan moga mask anda sentiasa muat sempurna!

Credits: Image by storyset