Membuat latar belakang bergaya OS dengan filter tampilan latar

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.

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.

Referensi lainnya

• Spesifikasi
• Status Platform Chrome
• MDN
• background-filter di Trik CSS
• Contoh di Codepen