Masking CSS memberi Anda opsi untuk menggunakan gambar sebagai lapisan mask. Artinya, Anda dapat menggunakan gambar, SVG, atau gradien sebagai mask, untuk membuat efek menarik tanpa editor gambar.
Saat Anda memotong elemen menggunakan properti clip-path, area yang dipangkas akan menjadi tidak terlihat.
Jika Anda ingin membuat bagian gambar buram atau menerapkan beberapa efek lain ke gambar, Anda harus menggunakan masking.
Postingan ini menjelaskan cara menggunakan properti mask-image di CSS,
yang memungkinkan Anda menentukan gambar untuk digunakan sebagai lapisan mask.
Tindakan ini akan memberi Anda tiga opsi. Anda dapat menggunakan file gambar sebagai mask, SVG, atau gradien.
Kompatibilitas browser
Meskipun CSS masking adalah Dasar Pengukuran yang Baru tersedia, sebagian besar fitur mask-image
tersedia di versi browser sebelumnya menggunakan -webkit-mask-image yang diawali dengan awalan.
Contoh berikut menunjukkan cara menggunakan kedua properti secara bersamaan untuk dukungan browser
terbaik.
Menutupi dengan gambar
Properti mask-image berfungsi dengan cara yang mirip dengan properti background-image.
Gunakan nilai url() untuk meneruskan gambar.
Gambar mask Anda harus memiliki area transparan atau semi-transparan.
Area yang sepenuhnya transparan akan menyebabkan bagian gambar di bawah area tersebut tidak terlihat. Namun, menggunakan area yang semi-transparan akan memungkinkan sebagian gambar asli terlihat. Anda dapat melihat perbedaannya di CodePen berikut.
- Gambar pertama adalah gambar asli balon tanpa mask.
- Gambar kedua memiliki masker yang diterapkan yang memiliki bintang putih pada latar belakang yang sepenuhnya transparan.
- Gambar ketiga memiliki bintang putih di latar belakang dengan transparansi gradien.
Contoh ini juga menggunakan properti mask-size dengan nilai cover.
Properti ini berfungsi dengan cara yang sama seperti background-size.
Gunakan kata kunci cover dan contain atau berikan ukuran latar belakang menggunakan satuan panjang yang valid, atau persentase.
Anda juga dapat mengulangi mask seperti mengulangi gambar latar, untuk menggunakan gambar kecil sebagai pola berulang.
Masker dengan SVG
Anda dapat menggunakan SVG, bukan file gambar, sebagai mask.
Ada beberapa cara untuk melakukannya.
Yang pertama adalah memiliki elemen <mask> di dalam SVG dan mereferensikan ID elemen tersebut di properti mask-image.
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Keuntungan dari pendekatan ini adalah mask dapat diterapkan ke elemen HTML apa pun, bukan hanya gambar.
Untuk skenario paling umum dalam menyamarkan gambar,
Anda dapat menyertakan gambar dalam SVG.
Pendekatan pertama adalah Dasar Pengukuran Baru tersedia, termasuk gambar dalam SVG
didukung oleh browser lama yang mendukung versi dengan awalan -webkit.
Masker dengan gradien
Menggunakan gradien CSS sebagai mask adalah cara yang elegan untuk mendapatkan area yang disamarkan tanpa perlu repot membuat gambar atau SVG.
Gradien linear yang digunakan sebagai mask dapat memastikan bahwa bagian bawah gambar tidak terlalu gelap di bawah teks, misalnya.
Anda dapat menggunakan jenis gradien apa pun yang didukung, dan berkreasi sesuka Anda. Contoh berikutnya ini menggunakan gradien radial untuk membuat mask lingkaran yang akan menerangi di belakang teks.
Beberapa mask
Seperti gambar latar belakang, Anda dapat menentukan beberapa sumber mask, yang menggabungkannya untuk mendapatkan efek yang Anda inginkan. Hal ini sangat berguna jika Anda ingin menggunakan pola yang dihasilkan dengan gradien CSS sebagai mask Anda. Biasanya, gambar ini akan menggunakan beberapa gambar latar belakang sehingga dapat diterjemahkan dengan mudah menjadi mask.
Misalnya, ada pola kotak-kotak dalam pola dengan gradien CSS ini. Kode, yang menggunakan gambar latar belakang, terlihat seperti ini:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Untuk mengubah ini, atau pola lain yang dirancang untuk gambar latar belakang, menjadi mask,
Anda harus mengganti properti background-* dengan properti mask yang relevan,
termasuk properti yang diawali dengan -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Ada beberapa efek yang sangat bagus yang dapat dibuat dengan menerapkan pola gradien ke gambar. Uji beberapa variasi lainnya dengan melakukan fork pada CodePen berikut.
Bersama dengan pemangkasan, mask CSS adalah cara untuk menambahkan minat pada gambar dan elemen HTML lainnya tanpa perlu menggunakan aplikasi grafis.