Mode Gabungan

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

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

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

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

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?

Perbedaan
Mencerahkan
Cerahkan
Overlay
Dullen
Kali

Jika Anda ingin menggabungkan warna yang berbeda dengan cara yang berbeda, gaya mode gabungan mana yang Anda perlukan?

Tidak dapat dipisahkan
Dapat dipisahkan