Blog Request tutorial? klik disini!

  • Membuat Efek Blend Modes Pada Image Menggunakan CSS3

    Ditulis oleh: Faizal Rafik
    594 kali dibaca
    13 Nov / 2014 14:34

    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






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155