Membuat efek dengan css semakin marak saat ini, dengan menggunakan CSS Filter kita bisa membuat efek-efek yang biasanya kita temukan di Photoshop, bahkan efek-efek seperti instagram bisa kita ciptakan dengan kemampuan CSS3. CSS Filter ini relatif masih baru, dan masih jarang digunakan.
Pada tutorial kali ini kita akan mencoba membuat efek dengan CSS Filter di gabung dengan CSS Animation sehingga akan menghasilkan efek transisi warna gambar yang menarik. Sayang nya baru support browser webkit seperti Google Chrome atau Safari.
Penggunaan: Efek ini bisa digunakan untuk mempercantik Header, Gambar di website gallery, dan lainnya.
Artikel Terkait:
Langsung saja kita mulai dengan membuat file html.
HTML
Pada tulisan ini saya hanya menampilkan satu div saja, walaupun dalam demo nya akan banyak div karena untuk mempercantik tampilan demo, tapi intinya hanyalah satu div yang ada efek saja.
Yang perlu diperhatikan disitu hanyalah pemberian class column1
, karena kolom itu yang akan diberi efek dengan css.
CSS
Untuk memberi efek pada div yang berisi gambar tersebut kita kasih efek dengan menggunakan css berikut ini
bisa dilihat disitu kita hanya menggunakan efek contrast dan grayscale saja, untuk efek lainnya bisa anda gunakan seperti invert, sepia, blur, dll.
Demo
Untuk anda yang sudah tidak sabar untuk melihat hasil yang telah dibuat bisa klik link demo dibawah ini atau download kode dari github.
DEMO (Webkit Browser: Chrome/Safari) | DOWNLOAD CODE
Sekian, semoga berguna untuk anda yang sedang mendalami CSS3.
Salam web design indonesia
kalau pengguna mozilla berarti tidak dapat menikmati hasil ini donk, padahal level validasi CSS3 ini dapat bekerja pada peramban manapun,tetapi kok CSS diatas tidak bekerja ya..
biasanya dengan moz dan o pasti dapat bekerja jika kita tambahkan pada CSS
silahkan dicoba ya :)
Wow keren. ntar coba ah.
wew..keren banget bos (y)