Penyamaran CSS memberi Anda opsi untuk menggunakan gambar sebagai lapisan mask. Ini berarti 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 diklip menjadi tidak terlihat.
Jika Anda ingin membuat bagian gambar buram atau menerapkan efek lain padanya, maka Anda perlu menggunakan masking.
Postingan ini menjelaskan cara menggunakan properti mask-image di CSS,
yang memungkinkan Anda menentukan gambar untuk digunakan sebagai lapisan mask.
Langkah ini memberi Anda tiga opsi. Anda dapat menggunakan file gambar sebagai mask, SVG, atau gradien Anda.
Kompatibilitas browser
Sebagian besar browser hanya memiliki dukungan sebagian untuk properti penyamaran CSS standar.
Anda harus menggunakan awalan -webkit- selain properti standar untuk mencapai kompatibilitas browser terbaik.
Lihat Dapatkah saya menggunakan Mask CSS? untuk mengetahui informasi dukungan browser lengkap.
Meskipun dukungan browser menggunakan properti berawalan adalah hal yang baik, saat menggunakan penyamaran untuk membuat teks di atas gambar terlihat, perhatikan apa yang akan terjadi jika penyamaran tidak tersedia.
Sebaiknya gunakan kueri fitur untuk mendeteksi dukungan bagi mask-image atau -webkit-mask-image
dan memberikan penggantian yang dapat dibaca sebelum menambahkan versi yang disamarkan.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Menyamarkan 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 menjadi tidak terlihat. Namun, menggunakan area semi-transparan akan memungkinkan beberapa gambar asli terlihat. Anda dapat melihat perbedaannya di Glitch di bawah ini. Gambar pertama adalah gambar asli balon tanpa topeng. Gambar kedua menerapkan mask dengan bintang putih pada latar belakang yang sepenuhnya transparan. Gambar ketiga memiliki bintang putih pada latar belakang dengan transparansi gradien.
Dalam contoh ini, saya juga menggunakan properti mask-size dengan nilai cover.
Properti ini berfungsi dengan cara yang sama seperti background-size.
Anda dapat menggunakan kata kunci cover dan contain atau Anda dapat memberikan ukuran untuk latar belakang menggunakan satuan panjang yang valid, atau persentase.
Anda juga dapat mengulangi mask seperti halnya mengulangi gambar latar untuk menggunakan gambar kecil sebagai pola berulang.
Penyamaran dengan SVG
Daripada menggunakan file gambar sebagai mask, Anda dapat menggunakan SVG.
Ada beberapa cara untuk melakukannya.
Yang pertama adalah memiliki elemen <mask> di dalam SVG dan mereferensikan ID elemen tersebut di properti mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Keuntungan dari pendekatan ini adalah bahwa mask dapat diterapkan ke elemen HTML apa pun, bukan hanya gambar. Sayangnya, Firefox adalah satu-satunya browser yang mendukung pendekatan ini.
Namun, tidak semuanya hilang, seperti untuk skenario paling umum masking gambar, kita dapat menyertakan gambar tersebut dalam SVG.
Menerapkan mask dengan gradien
Menggunakan gradien CSS sebagai mask Anda adalah cara elegan untuk mencapai area yang disamarkan tanpa perlu bersusah payah membuat gambar atau SVG.
Gradien linier sederhana yang digunakan sebagai mask dapat memastikan bahwa, misalnya, bagian bawah gambar tidak akan terlalu gelap di bawah teks.
Anda dapat menggunakan salah satu jenis gradien yang didukung, dan berkreasilah sesuai keinginan Anda. Contoh berikutnya ini menggunakan gradien radial untuk membuat mask lingkaran guna menerangi di belakang teks.
Menggunakan beberapa mask
Seperti gambar latar, Anda dapat menentukan beberapa sumber mask, dan menggabungkannya untuk mendapatkan efek yang diinginkan. Ini sangat berguna jika Anda ingin menggunakan pola yang dihasilkan dengan gradien CSS sebagai mask Anda. Gambar ini biasanya akan menggunakan beberapa gambar latar sehingga dapat diterjemahkan dengan mudah menjadi mask.
Sebagai contoh, saya menemukan pola papan catur yang bagus dalam artikel ini. Kode, yang menggunakan gambar latar, akan 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 mengubahnya, atau pola lain yang dirancang untuk gambar latar, menjadi mask,
Anda harus mengganti properti background-* dengan properti mask yang relevan,
termasuk yang berawalan -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 dapat dibuat dengan menerapkan pola gradien pada gambar. Coba remix Glitch dan uji beberapa variasi lainnya.
Selain clipping, mask CSS adalah cara untuk menambahkan daya tarik ke gambar dan elemen HTML lainnya tanpa perlu menggunakan aplikasi grafis.
Foto oleh Julio Rionaldo di Unsplash.