Membuat latar belakang bergaya OS dengan filter tampilan latar

Pemburaman dan pergeseran warna di belakang elemen.

Adam Argyle
Joe Medley
Joe Medley
GitHub
Transusi, pemburaman, dan efek lainnya adalah cara yang berguna untuk menciptakan kedalaman sekaligus mempertahankan konteks konten latar belakang. Platform ini mendukung berbagai kasus penggunaan, seperti kaca buram, overlay video, header navigasi transparan, penyensoran gambar yang tidak pantas, pemuatan gambar, dan sebagainya. Anda mungkin mengenali efek ini dari dua sistem operasi populer: Windows 10 dan iOS.

Contoh efek kaca buram.
Contoh efek kaca buram. Sumber.

Sebelumnya, teknik ini sulit diterapkan di web, sehingga memerlukan peretasan atau solusi yang kurang sempurna. Dalam beberapa tahun terakhir, Safari dan Edge telah menyediakan kemampuan ini melalui properti background-filter (dan alternatifnya, -webkit-backdrop-filter), yang secara dinamis memadukan warna latar depan dan latar belakang berdasarkan fungsi filter. Sekarang Chrome mendukung background-filter, mulai dari versi 76.

Demonstrasi fungsi filter untuk backdrop-filter. Coba contohnya di CodePen.

Dukungan browser

Dukungan Browser

  • 76
  • 79
  • 103
  • 9

Sumber

Untuk alasan performa, ganti gambar ke gambar, bukan polyfill jika backdrop-filter tidak didukung. Contoh di bawah menunjukkan hal ini.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Dasar-dasar

  • Properti backdrop-filter menerapkan satu atau beberapa filter ke elemen, yang mengubah tampilan apa pun di belakang elemen.
  • Elemen overlay setidaknya harus transparan sebagian.
  • Elemen overlay akan mendapatkan konteks penumpukan baru.

backdrop-filter CSS menerapkan satu atau beberapa efek pada elemen yang transparan atau transparan. Untuk memahaminya, perhatikan gambar di bawah ini.

Tidak ada transparansi latar depan
Segitiga yang ditumpangkan pada lingkaran. Lingkaran tidak dapat dilihat melalui segitiga. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Transparansi latar depan
Segitiga yang ditumpangkan pada lingkaran. Segitiga tembus pandang, sehingga lingkaran dapat dilihat melaluinya. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Gambar di sebelah kiri menunjukkan bagaimana elemen yang tumpang-tindih akan dirender jika backdrop-filter tidak digunakan atau didukung. Gambar di sebelah kanan menerapkan efek buram menggunakan backdrop-filter. Perhatikan bahwa kode tersebut menggunakan opacity selain backdrop-filter. Tanpa opacity, tidak akan ada yang perlu diburamkan. Tidak perlu diragukan lagi bahwa jika opacity disetel ke 1 (sepenuhnya buram), tidak akan ada efek di latar belakang.

Properti backdrop-filter seperti filter CSS, karena semua fungsi filter favorit Anda didukung: blur(), brightness(), contrast(), opacity(), drop-shadow(), dan seterusnya. Kode ini juga mendukung fungsi url() jika Anda ingin menggunakan gambar eksternal sebagai filter, serta kata kunci none, inherit, initial, dan unset. Ada penjelasan untuk semua ini di MDN, termasuk deskripsi sintaksis, filter, dan nilai.

Jika backdrop-filter disetel ke selain none, browser akan membuat konteks tumpukan baru. Blok yang memuat juga dapat dibuat, tetapi hanya jika elemen tersebut memiliki turunan posisi absolut dan tetap.

Anda dapat mengombinasikan filter untuk menghasilkan efek yang kaya dan cerdas, atau menggunakan satu filter saja untuk mendapatkan efek yang lebih halus atau akurat. Anda bahkan dapat menggabungkannya dengan filter SVG.

Contoh

Teknik dan gaya desain yang sebelumnya dikhususkan untuk sistem operasi kini berperforma tinggi dan dapat dicapai dengan satu deklarasi CSS. Mari kita lihat beberapa contohnya.

Satu filter

Pada contoh berikut, efek buram dicapai dengan menggabungkan warna dan blur. Blur disediakan oleh backdrop-filter, sedangkan warnanya berasal dari warna latar belakang semi-transparan elemen.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}
Coba contoh ini sendiri di CodePen.

Beberapa filter

Terkadang Anda memerlukan beberapa filter untuk mendapatkan efek yang diinginkan. Untuk melakukannya, berikan daftar filter yang dipisahkan oleh spasi. Contoh:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

Pada contoh berikut, masing-masing dari keempat panel memiliki kombinasi filter tampilan latar yang berbeda sementara kumpulan bentuk yang sama dianimasikan di belakangnya.

Coba contoh ini sendiri di CodePen.

Overlay

Contoh ini menunjukkan cara memburamkan latar belakang semi-transparan agar teks mudah dibaca saat menyatu dengan latar belakang halaman secara gaya.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}
Coba contoh ini untuk diri sendiri.

Kontras teks pada latar belakang dinamis

Seperti yang disebutkan sebelumnya, backdrop-filter memungkinkan efek berperforma tinggi yang sulit atau tidak mungkin dilakukan di web. Contohnya adalah mengubah latar belakang sebagai respons terhadap animasi. Dalam contoh ini, backdrop-filter mempertahankan kontras tinggi antara teks dan latar belakangnya, terlepas dari apa yang terjadi di belakang teks. Dimulai dengan warna latar belakang default darkslategray dan menggunakan backdrop-filter untuk membalikkan warna setelah transformasi.

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}
Coba contoh ini dari Chen Hui Jing dalam Codrops.

Kesimpulan

Lebih dari 560 pengguna telah memberikan suara positif terhadap bug Chromium selama beberapa tahun terakhir, dan menandai ini dengan jelas sebagai fitur CSS yang telah lama dinantikan. Rilis backdrop-filter di versi 76 membawa web lebih dekat ke presentasi UI yang benar-benar mirip OS.

Referensi lainnya