Pada kesempatan kali ini saya akan menjelaskan fungsi property backdrop-filter di CSS. Pada CSS3 menyediakan beberapa property yang mendukung untuk pembuatan tampilan User Interface yang unik dan di samping itu ada juga beberapa property tidak resmi dari setiap browser vendor.

Dimana berawal dari redesign radikal pada IOS 7, dengan gaya Flat yang terlihat ber beda dengan gaya flat lainnya. Jika di lihat, IOS7 lebih ke semi flat karena masih ada unsur-unsur nilai realistic yang dibawa nya. Salah satu desain yang saya suka adalah efek translucent di beberapa area, seperti area notification dan lockscreen.

Efek translucent tersebut adalah efek blur pada element yang berada di belakang objek utama. Seperti frosted glass.

Beberapa tahun ke depan, desain language dari IOS7 dibawa ke OS X Yosemite, yang tentunya efek translucent tersebut ikut disertakan. Beberapa bulan kemudian team webkit memperkenalkan property backdrop-filter tak hanya untuk mereplikasi efek translucent tapi juga filter-filter lain yang sudah ada pada css3 filter.

Untuk saat ini browser yang support hanya Safari dan Chrome yang dapat menampilkan efek tersebut. Jika teman-teman tidak menggunakan OS X, teman-teman bisa menggunakan Chrome terbaru dan mengaktifkan fitur tersebut melalui chrome://flags.

Ketikkan alamat berikut pada address bar chrome://flags , cari opsi Experimental Web Platform
features
 dan klik Enable lalu restart Chromenya.

Fungsi Property backdrop-filter Di CSS

Berikut Penggunaan nya:

  • Teman-teman buat file dengan nama index.html, ketikan kode seperti di bawah ini

Sampai di sini penjelasan saya mengenai fungsi property backdrop-filter di CSS, semoga bermanfaat.