Membuat Efek Blend Modes Pada Image Menggunakan CSS3

Efek Blend Modes adalah efek yang memadukan campuran warna antara pixel-pixel pada suatu objek layer tertentu dengan objek layer lainnya, misalnya mode warna campuran lebih gelap hanya akan membuat lebih gelap dari dua pixel. Biasanya efek Blend Modes ini kita buat menggunakan bantuan Photoshop, tetapi sekarang kita tidak perlu menggunakan photoshop lagi, dengan menggunakan CSS3 kita juga sudah bisa membuat efek Blend Modes ini dengan mudah.

Nah untuk efek Blend Modes pada CSS3 ini, jika kalian menggunakan browser dengan versi lama kalian perlu menambahkan CSS tambahan yaitu prefix, tetapi kalau untuk browser dengan versi terbaru kalian tidak perlu menambahkan prefix, dan untuk browser IE, efek Blend Modes ini belum support.

Oke kita akan langsung praktekkan saja ya teman-teman.

Pertama kalian bisa siapkan 1 buah gambar, dan ketikan baris program di bawah ini di dalam file HTML nya.

Dan Untuk CSS nya seperti gambar di bawah ini.

Kembali file HTML, kalian bisa tambahkan nama difference pada atribut class yang ada di dalam tag div, seperti  gambar dibawah ini.

Dan tambahkan juga untuk CSS nya seperti gambar dibawah ini

Hasilnya seperti ini

Dodge

Exclusion

Hard

Hue

Lighten

Luminosity

Mulitiply

Overlay

Saturation

Screen

Soft

Burn

Color

Darken

Buat kalian yang ingin mendownload keseluruhan baris program HTML dan CSS nya kalian bisa klik link download di bawah ini.

Download Source