Pemburaman dan pergeseran warna di belakang elemen.
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.](https://web.dev/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=6&hl=id)
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.
backdrop-filter
. Coba contohnya di CodePen.
Dukungan browser
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.
![Segitiga yang ditumpangkan pada lingkaran. Lingkaran tidak dapat dilihat melalui segitiga.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=6&hl=id)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![Segitiga yang ditumpangkan pada lingkaran. Segitiga tembus pandang, sehingga lingkaran dapat dilihat melaluinya.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=6&hl=id)
.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);
}
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.
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);
}
Kontras teks pada latar belakang dinamis
Seperti yang telah 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;
}
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.