Pemburaman dan pergeseran warna di belakang elemen.
Tembus cahaya, pemburaman, dan efek lainnya adalah cara yang berguna untuk menciptakan kedalaman sekaligus menjaga konteks konten latar belakang. Fitur ini mendukung banyak 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.
Sebelumnya, teknik ini sulit diterapkan di web, karena hanya 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 menggabungkan warna latar depan dan latar belakang berdasarkan fungsi filter. Kini Chrome mendukung background-filter
, mulai dari versi 76.
Dukungan browser
Untuk alasan performa, kembalilah ke gambar, bukan polyfill saat backdrop-filter
tidak didukung. Contoh di bawah menunjukkan hal tersebut.
@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 tumpukan baru.
CSS backdrop-filter
menerapkan satu atau beberapa efek ke elemen yang transparan atau transparan. Untuk memahaminya, perhatikan gambar di bawah ini.
.frosty-glass-pane { backdrop-filter: blur(2px); }
.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 blur menggunakan backdrop-filter
. Perhatikan bahwa kode ini menggunakan opacity
selain backdrop-filter
. Tanpa opacity
, pemburaman tidak dapat dilakukan. Hampir tidak perlu dikatakan bahwa jika opacity
disetel ke 1
(sepenuhnya buram) tidak akan ada efek di latar belakang.
Properti backdrop-filter
itu seperti filter CSS yang mendukung semua fungsi filter favorit Anda: 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 apa pun selain none
, browser akan membuat konteks penumpukan baru. Blok penampung juga dapat dibuat, namun hanya jika elemen memiliki turunan posisi absolut dan tetap.
Anda dapat menggabungkan filter untuk efek yang kaya dan cerdas, atau hanya menggunakan satu filter untuk efek yang lebih halus atau akurat. Anda bahkan dapat menggabungkannya dengan filter SVG.
Contoh
Teknik dan gaya desain yang sebelumnya disediakan untuk sistem operasi sekarang berperforma tinggi dan dapat dicapai dengan satu deklarasi CSS. Mari kita lihat beberapa contohnya.
Filter tunggal
Pada contoh berikut, efek buram dicapai dengan menggabungkan warna dan buram. Blur diberikan oleh backdrop-filter
, sedangkan warna 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 akan memerlukan beberapa filter untuk mencapai efek yang diinginkan. Untuk melakukannya, sediakan 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 empat panel memiliki kombinasi filter tampilan latar yang berbeda, sedangkan kumpulan bentuk yang sama dianimasikan di belakangnya.
Overlay
Contoh ini menunjukkan cara memburamkan latar belakang semitransparan agar teks mudah dibaca saat memadukan gaya dengan latar belakang halaman.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
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. Proses ini dimulai dengan warna latar belakang default darkslategray
dan menggunakan backdrop-filter
untuk menginversi 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 dari Anda telah memberikan suara positif untuk bug Chromium selama beberapa tahun terakhir, yang menandai hal ini dengan jelas sebagai fitur CSS yang telah lama ditunggu-tunggu. Rilis Chrome backdrop-filter
di versi 76 menghadirkan web selangkah lebih dekat ke presentasi UI yang benar-benar mirip OS.