Assalamu’alaikum teman-teman semuanya !! Kali ini kita akan belajar tutorial memberikan efek warna pada gambar dengan CSS3 Filter. Sebelumnya kita harus kenal dulu dengan CSS3 ini.

Apa itu CSS3??

CSS3 adalah Cascading Style Sheet versi ke 3, yaitu pengatur dan pengendali tampilan sebuah halaman blog/web. CSS3 melakukan penataan terhadap komponen HTML maupun XHTML pada halaman web sehingga menghasilkan tampilan yang ramah dimata atau retina friendly. CSS versi ketiga dapat melakukan berbagai pemutakhiran terhadap kemampuannya beradaptasi dengan teknologi multimedia yang semakin modern.

Kemampuan yang di milki CSS3 antara lain:

CSS3 mampu membuat efek animasi secara independent tanpa membutuhkan software tambahan seperti Adobe Flash dan Microsoft Silverlight. Karena hanya menggunakan kode-kode maka web tidak akan berat atau tidak lama dan tidak boros kuota untuk membukanya. CSS3 mampu memberikan efek grafis terhadap teks, kolom, table serta penataan huruf. CSS3 mampu menampilkan berbagai macam dan jenis huruf selain web-safe fonts. CSS3 mampu merekonstruksi secara visual tampilan block, seperti merubah ukuran kotak, transformasi 2D/ 3D, memberikan efek sudut (radius) dan shadow (bayangan). CSS3 mampu memanipulasi secara visual warna, desain maupun tekstur suatu halaman HTML atau XHTML.

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, sehingga akan menghasilkan efek warna gambar yang menarik. Fungsi dari CSS3 Filter ini nantinya memberikan Efek yang bisa digunakan untuk mempercantik Header, Gambar di website gallery, dan lainnya.

Anda bisa menggunakan code editor yang anda inginkan, namun disini saya akan menggunakan code editor Sublime Text. SELAMAT MENCOBA !!

Pertama, kita akan memulai dengan membuat file html terlebih dahulu.

HTML (Hypertext Markup Language)

Pada tulisan ini saya hanya menampilkan dua div saja sebagai percobaan, anda bisa menambahkan banyak div sesuai dengan yang anda inginkan.

Yang perlu diperhatikan disana adalah pemberian class container, karena kolom tersebut yang akan diberi efek dengan css.

CSS (Cascading Style Sheets)

Untuk memberi efek pada div yang berisi gambar tersebut maka kita beri efek dengan menggunakan css berikut ini, buatlah tag style didalam tag head.

Demo

Bagi anda yang sudah tidak sabar untuk melihat hasil yang telah dibuat bisa dilihat dengan cara klik kanan pada halaman code editor anda lalu open in browser.

Selamat mencoba dengan kreasi-kreasi baru anda, semoga bermanfaat.

Wassalamu’alaikum wr.wb

REFERENSI

[1]. https://www.tutorial-webdesign.com/memberi-efek-animasi-warna-pada-gambar-dengan-css3-filter/ diakses 15 Mei 2020

[2]. https://www.dumetschool.com/blog/Membuat-Efek-Filter-pada-Gambar-dengan-CSS3 diakses pada 15 Mei 2020

[3]. https://ngaeweb.blogspot.com/2015/08/pengertian-css3-serta kekurangan-dan.html diakses 15 Mei 2020

Original Create by : Ummi Soleha

Sumber Gambar