Bentuk Kompleks

Fitur web: Mask SVG

Ringkasan

Untuk memotong elemen menjadi bentuk yang kompleks dan bebas seperti goresan kuas atau tekstur organik, gunakan Masking CSS (mask-image). Meskipun clip-path sangat cocok untuk bentuk geometris atau jalur vektor, mask-image memungkinkan Anda menggunakan gambar (seperti PNG dengan transparansi) atau SVG untuk menentukan area yang terlihat dari suatu elemen. Pendekatan ini lebih ekspresif karena mendukung semi-transparansi, sehingga memungkinkan tepi yang halus dan tekstur kompleks yang sulit atau tidak mungkin dicapai dengan clip-path.

Penerapan

Untuk menerapkan bentuk kompleks menggunakan mask CSS:

Menggunakan transparansi dari gambar

Anda dapat menggunakan transparansi gambar sebagai mask, dengan bagian buram terlihat dan bagian transparan tersembunyi. Gambar ini dapat berupa PNG, SVG, atau gambar lain dengan transparansi, atau gambar yang dihasilkan, seperti gradien CSS.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Menggunakan elemen SVG di HTML

Anda juga dapat mereferensikan elemen <mask> yang ditentukan dalam SVG inline di HTML halaman Anda. Gunakan maskContentUnits="objectBoundingBox" untuk membuat mask diskalakan secara otomatis dengan ukuran elemen. Hal ini memberi tahu browser untuk menafsirkan semua koordinat di dalam mask sebagai pecahan dari 0 hingga 1 (seperti 0.5 untuk 50%), bukan piksel absolut.

Masking Luminance vs. Alpha: Secara default, mask SVG menggunakan luminance (kecerahan) untuk menentukan opasitas, dengan warna putih menampilkan, hitam menyembunyikan, dan abu-abu menciptakan semi-transparansi. Jika Anda ingin mask menggunakan saluran alfa (transparansi) bentuk SVG, Anda dapat menentukan mask-type: alpha; di CSS atau mask-type="alpha" langsung di elemen <mask> SVG.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

Strategi penggantian

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

  • Elemen tidak akan dipangkas dan akan ditampilkan sebagai persegi panjang normal.
  • Pastikan konten masih dapat dibaca dan tata letaknya tidak rusak tanpa mask (progressive enhancement).
  • Jika perlu, gunakan deteksi fitur untuk memberikan bentuk penggantian yang lebih sederhana dengan clip-path.
/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}