CSS Masking - mask (ID)

Hai teman-teman masa depan yang akan menjadi master CSS! Hari ini, kita akan mendalami dunia yang menarik dari CSS masking. Bayangkan Anda adalah seorang penyihir, dan Anda ingin membuat bagian dari halaman web Anda menghilang atau muncul dengan cara yang menarik. Itu tepatnya apa yang CSS masking memungkinkan kita lakukan! Jadi, mari kita pakai topi penyihir kita dan belajar beberapa trik CSS!

Apa Itu CSS Masking?

CSS masking mirip dengan menggunakan stensil tak terlihat pada elemen web Anda. Itu memungkinkan Anda menyembunyikan atau menampilkan sebagian elemen berdasarkan gambar lain atau bentuk. Teknik ini sangat kuat dan dapat menciptakan efek yang sangat menarik!

Nilai yang Mungkin

Sebelum kita mulai mengkode, mari kita lihat nilai yang berbeda yang dapat kita gunakan dengan properti mask. Bayangkan ini sebagai jenis berbeda dari tongkat sihir, masing-masing menciptakan efek yang unik:

Nilai	Deskripsi
none	Tidak ada masking yang diterapkan
<mask-reference>	Merujuk ke gambar masking
<masking-mode>	Menentukan bagaimana masking diterapkan
<position>	Mengatur posisi masking
<bg-size>	Menentukan ukuran masking
<repeat-style>	Menentukan bagaimana masking berulang
<geometry-box>	Menentukan kotak masking
no-clip	Menghindari pemotongan masking

Jangan khawatir jika ini terlihat membingungkan saat ini. Kita akan mengexploreasi masing-masing dengan contoh!

Diterapkan Pada

Properti mask dapat diterapkan pada setiap elemen. Itu seperti memiliki tongkat sihir yang bekerja pada semua!

Sintaks

Sintaks dasar untuk properti mask tampak seperti ini:

.element {
mask: <value>;
}

Sekarang, mari kita lihat nilai masing-masing secara rinci.

CSS mask - none Value

Nilai none sangat jelas. Itu berarti tidak ada masking yang diterapkan. Itu seperti memutuskan untuk tidak menggunakan tongkat sihir Anda sama sekali.

.no-mask {
mask: none;
}

Kode ini hanya memberitahu browser, "Jangan terapkan masking pada elemen ini."

CSS mask - <mask-reference>

Ini adalah tempat dimulainya magik nyata! Sebuah <mask-reference> dapat berupa gambar atau gradient CSS yang menentukan bagian mana dari elemen yang harus terlihat.

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

.gradient-mask {
mask-image: linear-gradient(ke kanan, transparent, hitam);
mask: linear-gradient(ke kanan, transparent, hitam);
}

Dalam contoh ini, kita menggunakan baik file gambar ('mask.png') atau gradient linear sebagai masking kita. Bagian hitam dari masking akan menampilkan elemen, sedangkan bagian transparan akan menyembunyikan itu.

CSS mask - <masking-mode>

Mode masking menentukan bagaimana masking diterapkan. Ada dua nilai: alpha dan luminance.

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

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

• alpha: Menggunakan kanal alpha gambar masking.
• luminance: Menggunakan luminasi (kecerahan) gambar masking.

CSS mask - <position>

Seperti gambar latar belakang, Anda dapat menempatkan masking Anda:

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

Ini menempatkan masking di tengah elemen. Anda dapat menggunakan nilai posisi CSS yang valid di sini.

CSS mask - <bg-size>

Anda juga dapat mengontrol ukuran masking Anda:

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

Ini membuat masking menutupi seluruh elemen. Anda dapat menggunakan dimensi khusus juga, seperti 100px 200px.

CSS mask - <repeat-style>

Jika masking Anda lebih kecil dari elemen, Anda dapat mengontrol bagaimana itu berulang:

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

Ini mengulangi masking secara horizontal di sepanjang elemen.

CSS mask - <geometry-box>

Kotak geometri menentukan area yang masking menutupi:

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

Ini menerapkan masking ke kotak padding elemen.

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

Nilai no-clip menghindari pemotongan masking ke batas elemen:

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

Ini memungkinkan masking untuk diperpanjang melewati batas elemen.

CSS mask - Properti Terkait

Ada beberapa properti terkait mask yang memberikan Anda kendali yang lebih banyak:

Properti	Deskripsi
mask-image	Menentukan gambar masking
mask-mode	Mengatur mode masking
mask-repeat	Mengontrol bagaimana masking berulang
mask-position	Mengatur posisi masking
mask-clip	Menentukan area pemantulan masking
mask-origin	Mengatur asal masking
mask-size	Menentukan ukuran masking
mask-composite	Menentukan bagaimana masking digabungkan

Setiap properti ini mengacu pada bagian dari properti mask shorthand yang kita gunakan.

Dan begitu saja, teman-teman penyihir CSS muda! Anda telah belajar dasar-dasar CSS masking. Ingat, seperti semua trik sihir, memahami CSS masking memerlukan latihan. Jadi jangan takut untuk mencoba dan menciptakan desain web yang magis Anda sendiri!

Dalam tahun-tahun mengajar saya, saya menemukan bahwa cara terbaik untuk belajar adalah dengan melakukan. Jadi ini adalah latihan menarik untuk Anda: coba menciptakan efek "revelasi" pada gambar menggunakan gradient masking. Buatlah agar saat Anda mengarahkan kursor ke gambar, itu terungkap sepenuhnya. Itu seperti menarik tabir untuk menampilkan gambar tersembunyi!

Happy coding, dan semoga masking Anda selalu pas!

Credits: Image by storyset