Menerapkan efek ke gambar dengan properti gambar mask CSS

Penyamaran 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.

Rachel Andrew

Saat Anda memotong elemen menggunakan properti clip-path, area yang terpotong menjadi tidak terlihat. Jika Anda ingin membuat bagian gambar buram atau menerapkan beberapa efek lainnya, 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

Sebagian besar browser hanya memiliki dukungan sebagian untuk properti masking CSS standar. Anda harus menggunakan awalan -webkit- selain properti standar untuk mencapai kompatibilitas browser terbaik. Lihat Dapatkah saya menggunakan Masker CSS? untuk mengetahui informasi dukungan browser lengkap.

Meskipun dukungan browser menggunakan properti awalan bagus, 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 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. */
}

Membuat mask 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 Glitch di bawah. Gambar pertama adalah gambar asli balon tanpa mask. 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 Anda dapat memberikan 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.

Penyamaran 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.

<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 pendekatan ini adalah 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, karena untuk skenario paling umum dalam menyamarkan gambar, kita dapat menyertakan gambar dalam SVG.

Penyamaran dengan gradien

Menggunakan gradien CSS sebagai mask adalah cara elegan untuk mendapatkan area yang disamarkan tanpa perlu repot membuat gambar atau SVG.

Gradien linear sederhana yang digunakan sebagai mask dapat memastikan bahwa bagian bawah gambar tidak akan 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.

Menggunakan 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. 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 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. Coba remix Glitch dan uji beberapa variasi lainnya.

Bersama dengan pemangkasan, mask CSS adalah cara untuk menambahkan minat pada gambar dan elemen HTML lainnya tanpa perlu menggunakan aplikasi grafis.

Foto oleh Julio Rionaldo di Unsplash.