Penyamaran CSS memberi Anda opsi untuk menggunakan gambar sebagai lapisan mask. Artinya, Anda dapat menggunakan gambar, SVG, atau gradien sebagai mask, untuk membuat efek yang menarik tanpa editor gambar.
Saat Anda memotong elemen menggunakan properti clip-path, area yang terpotong menjadi tidak terlihat.
Jika Anda ingin membuat sebagian gambar buram atau menerapkan beberapa efek lain ke gambar tersebut, Anda harus menggunakan masking.
Postingan ini menjelaskan cara menggunakan properti mask-image di CSS,
yang memungkinkan Anda menentukan gambar
yang akan digunakan sebagai lapisan mask.
Ini memberi Anda tiga opsi. Anda dapat menggunakan file gambar sebagai mask, SVG, atau gradien.
Kompatibilitas browser
Sebagian besar browser hanya memiliki dukungan parsial untuk properti masking CSS standar.
Anda harus menggunakan awalan -webkit- selain properti standar untuk mencapai kompatibilitas browser terbaik.
Lihat Bisakah saya menggunakan Masker CSS? untuk informasi dukungan browser lengkap.
Meskipun dukungan browser
menggunakan properti berawalan adalah hal yang baik,
saat menggunakan masking untuk membuat teks di atas gambar terlihat, perhatikan apa yang akan terjadi jika masking tidak tersedia.
Sebaiknya gunakan kueri fitur untuk mendeteksi dukungan untuk mask-image atau -webkit-mask-image
dan menyediakan pengganti 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 tidak terlihat. Namun, menggunakan area yang semi-transparan akan memungkinkan beberapa gambar asli muncul. Anda dapat melihat perbedaannya di Glitch di bawah. Gambar pertama adalah gambar asli balon tanpa masker. Gambar kedua menerapkan mask dengan bintang putih pada latar belakang yang sepenuhnya transparan. Gambar ketiga memiliki bintang putih di 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 memberikan ukuran latar belakang menggunakan satuan panjang yang valid, atau persentase.
Anda juga dapat mengulangi {i>mask<i} Anda seperti Anda mengulangi gambar latar, untuk menggunakan gambar kecil sebagai pola berulang.
Penyamaran dengan SVG
Alih-alih menggunakan file gambar sebagai mask, Anda dapat menggunakan SVG.
Ada beberapa cara untuk mencapainya.
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 yaitu menutupi gambar, kita dapat menyertakan gambar di SVG.
Penyamaran dengan gradien
Menggunakan gradien CSS sebagai mask adalah cara elegan untuk mencapai area yang disamarkan tanpa perlu repot membuat gambar atau SVG.
Misalnya, gradien linier sederhana yang digunakan sebagai mask dapat memastikan bahwa bagian bawah gambar tidak akan terlalu gelap di bawah teks.
Anda dapat menggunakan salah satu jenis gradien yang didukung, dan berkreasi sesuka Anda. Contoh berikutnya menggunakan gradien radial untuk membuat mask lingkaran untuk menerangi di belakang teks.
Menggunakan beberapa mask
Seperti pada gambar latar, Anda dapat menentukan beberapa sumber {i>mask<i}, menggabungkannya untuk mendapatkan efek yang diinginkan. Hal ini sangat berguna jika Anda ingin menggunakan pola yang dibuat dengan gradien CSS sebagai mask Anda. Ini biasanya akan menggunakan beberapa gambar latar, sehingga dapat diterjemahkan dengan mudah menjadi penyamaran.
Sebagai contoh, saya menemukan pola papan catur yang bagus di 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 {i>mask<i},
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 yang bisa dibuat dengan menerapkan pola gradien ke gambar. Coba remix Glitch dan uji beberapa variasi lainnya.
Selain {i>clipping<i}, CSS mask adalah cara untuk menambahkan daya tarik pada gambar dan elemen HTML lainnya tanpa perlu menggunakan aplikasi grafis.
Foto oleh Julio Rionaldo di Unsplash.