Konten Bertekstur Visual

Fitur web: Masker

Ringkasan

Untuk menerapkan pola tekstur atau pelapukan yang realistis (seperti grunge, noise, atau tekstur kertas) ke elemen, gunakan Masking CSS (mask-image) dengan gambar tekstur berulang. Dengan begitu, Anda dapat membuat konten itu sendiri tampak bertekstur dengan membuat bagian-bagiannya semi-transparan, bukan hanya menempatkan tekstur di atasnya. Hal ini menciptakan tampilan material fisik yang lebih realistis.

Penerapan

Untuk menerapkan pola tekstur:

Metode ini paling umum digunakan untuk tekstur yang realistis.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

Metode 2: Menggunakan Gradien CSS untuk pola geometris

Anda dapat membuat pola menggunakan gradien CSS. Kode ini mandiri dan tidak memerlukan file gambar eksternal.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Mode Masking Alfa vs Luminans

Secara default, mask CSS menggunakan mask-mode: match-source. Artinya, browser akan otomatis memutuskan apakah akan menggunakan saluran alfa (transparansi) atau luminans (kecerahan) mask berdasarkan jenis sumber yang Anda berikan:

Jenis Sumber Masker Mode Masker Default Perilaku Penyamaran
Elemen <mask> SVG inline luminance Opasitas ditentukan oleh kecerahan warna. Putih menampilkan konten, hitam menyembunyikannya, dan abu-abu menciptakan semi-transparansi.
File Gambar Langsung (misalnya, file PNG, SVG) alpha Opasitas ditentukan oleh transparansi. Bagian buram menampilkan konten, dan bagian transparan menyembunyikannya.
CSS Gradient alpha Opasitas ditentukan oleh transparansi. Warna buram (seperti black) menampilkan konten, dan warna transparan menyembunyikannya.

Strategi penggantian

Jika browser tidak mendukung mask-image atau versi dengan awalan:

  • Elemen akan ditampilkan tanpa tekstur (isian yang rapi dan solid).
  • Pastikan konten masih dapat dibaca tanpa tekstur (progressive enhancement).
  • Anda dapat menggunakan gambar latar atau overlay sebagai pengganti untuk menyimulasikan tekstur, meskipun hal ini tidak akan memengaruhi transparansi konten itu sendiri.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}