Memberikan Tipe Filter Drop Shadow Pada CSS3

Selanjutnya yang terakhir akan kita coba adalah drop-shadow jadi drop-shadow ini sama seperti box-shadow yang nilainya ada x-offset, y-offset, blurnya dan yang terakhir ada warna bayangannya. Bentuk penulisannya bisa kita tulis seperti berikut

Jadi nilai tersebut sama dengan penulisan box-shadow pada CSS3. Tapi drop-shadow ini sedikit lebih keren dan menarik dari pada teman teman gunakan box-shadow atau text-shadow. Kenapa ? misalnya teman teman ingin memberikan bayangan pada gambar biasanya kita gunakan box-shadow tapi ketika teman teman ingin memberikan bayangan pada tulisan atau text maka teman teman harus ganti propertynya jadi text-shadow tapi dengan menggunakan drop-shadow itu bisa di implementasikan ke keduanya misalnya ada elemen <h1> lalu saya berikan bayangan yang sama

tanpa merubah tipenya tidak menggunakan box-shadow dan text-shadow efeknya sama dan masih ada bayangannya disana. Itu perilakunya yang pertama.

Lalu yang kedua ini yang lebih keren lagi. Contohnya saya punya sebuah gambar yang berformat PNG yang gambarnya ada transparansinya dan jika kita tidak menggunakan filter tapi saya menggunakan box-shadow maka hasilnya yang akan diberikan bayangan adalah boxnya bukan tulisannya

tapi ketika saya ubah nilainya menjadi filter drop-shadow dengan bayangan yang sama

maka nilainya otomatis memberikan bayangan pada elemen yang transparan digambarnya sebagai berikut

Jadi dengan drop-shadow ini akan memberikan bayangan pada objeknya bukan pada kotak gambarnya. Dan menurut saya ini cukup keren karena drop-shadow sudah mampu mengenali itu. Oke mungkin itu beberapa tipe filter yang bisa digunakan dari property CSS3 dan pengunaannya filter ini teman teman bisa ditumpuk artinya teman teman bisa berikan lebih dari satu efek tipe filternya. Terima kasih.