The CSS Podcast - 024: Blend Modes
Duotone adalah perlakuan warna yang populer untuk fotografi yang membuat gambar terlihat seperti hanya terdiri dari dua warna yang kontras: satu untuk sorotan dan satu lagi untuk bayangan. Namun, bagaimana cara melakukannya dengan CSS?
Dengan menggunakan mode campuran—dan teknik lain yang telah Anda pelajari, seperti filter dan pseudo-elemen—Anda dapat menerapkan efek ini ke gambar apa pun.
Apa yang dimaksud dengan mode campuran?
Mode campuran biasanya digunakan dalam alat desain seperti Photoshop untuk membuat efek komposisi dengan mencampur warna dari dua lapisan atau lebih. Dengan mengubah cara warna bercampur, Anda dapat memperoleh efek visual yang sangat menarik. Anda juga dapat menggunakan mode campuran sebagai utilitas, seperti mengisolasi gambar yang memiliki latar belakang putih, sehingga tampak memiliki latar belakang transparan.
Anda dapat menggunakan sebagian besar mode campuran yang tersedia di alat desain dengan CSS,
menggunakan
properti mix-blend-mode
atau
background-blend-mode
.
mix-blend-mode
menerapkan penggabungan ke seluruh elemen
dan background-blend-mode
menerapkan penggabungan ke latar belakang elemen.
Anda menggunakan background-blend-mode
jika memiliki beberapa latar belakang pada elemen
dan ingin semuanya berbaur satu sama lain.
mix-blend-mode
memengaruhi seluruh elemen,
termasuk elemen pseudo-nya.
Salah satu kasus penggunaannya adalah dalam contoh awal gambar duotone,
yang memiliki lapisan warna yang diterapkan ke elemen melalui pseudo-elemennya.
Mode gabungan terbagi menjadi dua kategori: dapat dipisahkan dan tidak dapat dipisahkan. Mode gabungan yang dapat dipisahkan mempertimbangkan setiap komponen warna, seperti RGB, satu per satu. Mode gabungan yang tidak dapat dipisahkan mempertimbangkan semua komponen warna secara setara.
Kompatibilitas browser
mix-blend-mode
background-blend-mode
Mode gabungan yang dapat dipisahkan
Normal
Ini adalah mode gabungan default dan tidak mengubah apa pun tentang cara elemen bergabung dengan elemen lain.
Kali
Mode gabungan multiply
seperti menumpuk beberapa transparansi di atas satu sama lain.
Piksel putih akan tampak transparan,
dan piksel hitam akan tampak hitam.
Nilai di antara keduanya akan mengalikan nilai luminositas (cahaya).
Ini berarti cahaya menjadi jauh lebih terang dan gelap,
lebih gelap—sering kali menghasilkan hasil yang lebih gelap.
.my-element {
mix-blend-mode: multiply;
}
Layar
Menggunakan screen
akan mengalikan nilai light—efek terbalik dari multiply
,
dan paling sering akan menghasilkan hasil yang lebih terang.
.my-element {
mix-blend-mode: screen;
}
Overlay
Mode gabungan ini—overlay
—menggabungkan multiply
dan screen
.
Warna gelap dasar menjadi lebih gelap dan warna terang dasar menjadi lebih terang.
Warna rentang menengah, seperti abu-abu 50%, tidak terpengaruh.
.my-element {
mix-blend-mode: overlay;
}
Gelapkan
Mode gabungan darken
membandingkan gambar sumber dan luminositas warna gelap gambar latar
dan memilih yang paling gelap dari keduanya.
Hal ini dilakukan dengan membandingkan nilai rgb, bukan luminositas (seperti yang dilakukan multiply
dan screen
),
untuk setiap saluran warna.
Dengan darken
dan lighten
, nilai warna baru sering dibuat dari proses perbandingan ini.
.my-element {
mix-blend-mode: darken;
}
Cerahkan
Menggunakan lighten
akan melakukan hal yang berlawanan dengan darken
.
.my-element {
mix-blend-mode: lighten;
}
Dodge warna
Jika Anda menggunakan color-dodge
, warna latar belakang akan menjadi lebih terang untuk mencerminkan warna sumber.
Warna hitam murni tidak akan terpengaruh oleh mode ini.
.my-element {
mix-blend-mode: color-dodge;
}
Burn warna
Mode gabungan color-burn
sangat mirip dengan mode gabungan multiply
,
tetapi meningkatkan kontras, sehingga menghasilkan tone tengah yang lebih jenuh dan mengurangi sorotan.
.my-element {
mix-blend-mode: color-burn;
}
Cahaya keras
Penggunaan hard-light
akan menghasilkan kontras yang jelas.
Mode gabungan ini menyaring atau mengalikan nilai luminositas.
Jika nilai piksel lebih terang dari abu-abu 50%, gambar akan lebih terang,
seolah-olah difilter. Jika lebih gelap, nilainya akan dikalikan.
.my-element {
mix-blend-mode: hard-light;
}
Cahaya lembut
Mode gabungan soft-light
adalah versi overlay
yang tidak terlalu keras.
Cara kerjanya hampir sama dengan kontras yang lebih rendah.
.my-element {
mix-blend-mode: soft-light;
}
Perbedaan
Cara yang baik untuk membayangkan cara kerja difference
adalah sedikit seperti cara kerja negatif foto.
Mode gabungan difference
mengambil nilai perbedaan dari setiap piksel,
yang membalik warna terang.
Jika nilai warna identik, warna tersebut akan menjadi hitam.
Perbedaan nilai akan terbalik.
.my-element {
mix-blend-mode: difference;
}
Pengecualian
Penggunaan exclusion
sangat mirip dengan difference
,
tetapi bukan menampilkan hitam untuk piksel yang identik,
warna ini akan menampilkan abu-abu 50%, sehingga menghasilkan output yang lebih lembut dengan kontras yang lebih rendah.
.my-element {
mix-blend-mode: exclusion;
}
Mode gabungan yang tidak dapat dipisahkan
Anda dapat menganggap mode gabungan ini seperti komponen warna HSL. Masing-masing mengambil nilai komponen tertentu dari lapisan aktif dan mencampurnya dengan nilai komponen lainnya.
Corak warna
Mode gabungan hue
mengambil hue warna sumber
dan menerapkannya ke saturasi dan luminositas warna latar belakang.
.my-element {
mix-blend-mode: hue;
}
Saturasi
Ini berfungsi seperti hue
,
tetapi menggunakan saturation
sebagai mode gabungan menerapkan saturasi warna sumber
ke hue dan luminositas warna latar belakang.
.my-element {
mix-blend-mode: saturation;
}
Warna
Mode gabungan color
akan membuat warna dari hue dan saturasi warna sumber
dan luminositas warna latar belakang.
.my-element {
mix-blend-mode: color;
}
Luminositas
Terakhir, luminosity
adalah kebalikan dari color
.
Fungsi ini membuat warna dengan luminositas warna sumber serta hue dan saturasi warna latar belakang.
.my-element {
mix-blend-mode: luminosity;
}
Properti isolation
Jika Anda menetapkan properti isolation
agar memiliki nilai isolate
,
properti tersebut akan membuat konteks penumpukan baru,
yang akan mencegahnya berbaur dengan lapisan latar belakang.
Seperti yang Anda pelajari di modul z-index, saat Anda membuat konteks penumpukan baru,
lapisan tersebut menjadi lapisan dasar.
Artinya, mode gabungan tingkat induk tidak akan lagi berlaku,
tetapi elemen di dalam elemen dengan kumpulan isolation: isolate
masih dapat digabungkan.
Perhatikan bahwa ini tidak berfungsi dengan background-blend-mode
karena properti latar belakang sudah diisolasi.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang mode campuran
Manakah dari opsi berikut yang merupakan mode campuran CSS?
Jika Anda ingin menggabungkan warna yang berbeda dengan cara yang berbeda, gaya mode gabungan mana yang Anda perlukan?