Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang Cara Menggunakan Property filter Pada CSS.Property Filter pada CSS adalah cara penerapan efek filter untuk elemen pada sebuah website, yang biasanya digunakan untuk gambar. Banyak efek filter yang teman-teman pakai di CSS, yang sebagainnya ada juga pada Adobe Photoshop, seperti blur effects, drop shadows, and color shifting and manipulation seperti saturating/desaturating colors.
Filter pada CSS diterapkan pada gambar sebelum gambar tersebut ditampilkan pada website kita. Elemen jenis ini yang melewati filter sebelum ditampilakan pada website kita. Jadi pada saat gambar nanti ditampilakan atau yang kita lihat adalah gambar yang sudah diberikan efek filter dari CSS tersebut.
Efek filter diterapkan pada sebuah element menggunakan property Filter.
Berikut ini adalah fungsi filter yang tersedia pada CSS:
- blur()
- brightness()
- contrast()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
- drop-shadow()
- url()
Secara konseptual, setiap bagian dari elemen yang diberi efek filter akan ikut terpengaruhi oleh operasi filter. Hal ini termasuk konten, latar belakang, perbatasan, dekorasi teks, garis dan mekanisme bergulir terlihat dari elemen yang filter diterapkan, dan orang-orang dari keturunannya. Perlu diperhatikan juga urutan teman-teman menerapkan filter juga akan mengubah hasil akhir dari elemen tersebut.
Ada juga beberapa filter yang akan berdampak pada halaman website kita, terutama jika kita menggunakan filter blur() dan drop-shadow(). Jadi kita harus memperhatikan juga browser untuk mobile dan desktop kita pada saat ingin menggunakan filter blur() dan drop-shadow().
Penulisan Script:
|
1 |
filter: <filter-function> |
Nah menarik ya teman-teman, kita bisa memberikan efek filter pada elemen (biasanya gambar) dengan menggunakan CSS, dan untuk penjelasan filter yang tersedia pada CSS akan dibahas di postingan berikutnya. Semoga bermanfaat.