Soft Edge Content Fade

Fitur web: Masker

Ringkasan

Untuk menerapkan gradien transparansi ke tepi penampung (misalnya, untuk menunjukkan bahwa ada lebih banyak konten yang dapat di-scroll atau untuk memudarkan teks), gunakan Masking CSS dengan gradien linear. Pendekatan ini lebih baik daripada menggunakan overlay semi-transparan karena benar-benar memudarkan konten itu sendiri, sehingga latar belakang dapat terlihat secara alami tanpa mengganggu pemilihan teks atau peristiwa pointer.

Penerapan

Untuk menerapkan fade tepi lembut:

Memudarkan tepi bawah penampung

Hal ini berguna untuk menunjukkan bahwa ada lebih banyak konten di bawah dalam area yang dapat di-scroll.

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

Memudarkan tepi atas dan bawah

Anda dapat menggunakan satu gradien dengan beberapa perhentian warna untuk memudarkan kedua tepi.

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

Strategi penggantian

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

  • Konten tidak akan memudar dan akan ditampilkan dengan tepi yang tajam.
  • Pastikan antarmuka masih berfungsi dan konten dapat dibaca tanpa efek pudar (progressive enhancement).
  • Anda dapat menggunakan overlay semi-transparan sebagai pengganti, tetapi perlu diketahui bahwa hal ini memerlukan pengetahuan tentang warna latar belakang dan dapat mengganggu pemilihan teks kecuali jika pointer-events: none digunakan.
/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}