Mode Gabungan

Podcast CSS - 024: Mode Campuran

Duotone adalah perawatan warna yang populer untuk fotografi yang membuat gambar terlihat hanya terdiri dari dua warna yang kontras: satu untuk highlight dan satu lagi untuk lowlight. Namun, bagaimana cara melakukannya dengan CSS?

Menggunakan mode campuran — dan teknik lain yang telah Anda pelajari, seperti filter dan elemen semu—Anda dapat menerapkan efek ini ke gambar apa pun.

Apa itu mode campuran?

Mode campuran biasanya digunakan dalam alat desain seperti Photoshop untuk menciptakan efek komposisi dengan mencampur warna dari dua atau lebih {i>layer<i}. Dengan mengubah cara campuran warna, Anda dapat mencapai 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 bisa menggunakan sebagian besar mode campuran yang tersedia di {i>tool<i} desain dengan CSS, menggunakan mix-blend-mode atau Properti 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 saat memiliki beberapa latar belakang pada elemen dan ingin mereka semua menyatu satu sama lain.

mix-blend-mode memengaruhi seluruh elemen, termasuk elemen-elemen semu. Salah satu kasus penggunaan adalah contoh awal gambar duotone, yang memiliki {i>layer<i} warna yang diterapkan pada elemen melalui elemen-elemen semu.

Mode campuran terbagi menjadi dua kategori: dapat dipisahkan dan tidak dapat dipisahkan. Mode campuran yang dapat dipisahkan mempertimbangkan setiap komponen warna, seperti RGB, secara terpisah. Mode campuran yang tidak dapat dipisahkan menganggap semua komponen warna sama.

Kompatibilitas browser

mix-blend-mode

Dukungan Browser

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

Sumber

background-blend-mode

Dukungan Browser

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

Sumber

Mode penggabungan yang dapat dipisahkan

Normal

Ini adalah mode campuran default dan tidak mengubah apa pun tentang bagaimana elemen menyatu dengan elemen lain.

Kali

Mode campuran multiply seperti menumpuk beberapa transparansi di atas satu sama lain. Piksel putih akan tampak transparan, dan piksel hitam akan tampak hitam. Apa pun yang ada di antaranya akan mengalikan nilai luminositas (cahaya). Artinya lampu menjadi jauh lebih terang dan gelap, lebih gelap—paling sering menghasilkan hasil yang lebih gelap.

.my-element {
  mix-blend-mode: multiply;
}

Layar

Menggunakan screen akan melipatgandakan nilai light—efek terbalik dari multiply, dan sering kali memberikan hasil yang lebih cerah.

.my-element {
  mix-blend-mode: screen;
}

Overlay

Mode campuran 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 campuran darken membandingkan luminositas warna gelap gambar sumber dan gambar tampilan latar dan memilih yang paling gelap. Hal ini dilakukan dengan membandingkan nilai rgb dan 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;
}

Lighten

Penggunaan lighten melakukan kebalikan dari darken.

.my-element {
  mix-blend-mode: lighten;
}

Hindari warna

Jika Anda menggunakan color-dodge, warna latar belakang akan dicerahkan untuk mencerminkan warna sumber. Warna hitam murni tidak melihat efek dari mode ini.

.my-element {
  mix-blend-mode: color-dodge;
}

Pembakaran warna

Mode campuran color-burn sangat mirip dengan mode campuran multiply, tetapi meningkatkan kontras, sehingga menghasilkan rona tengah yang lebih tersaturasi dan mengurangi sorotan.

.my-element {
  mix-blend-mode: color-burn;
}

Cahaya keras

Penggunaan hard-light akan menciptakan kontras yang jelas. Mode campuran ini menyaring atau mengalikan nilai luminositas. Jika nilai piksel lebih terang dari 50% abu-abu, gambar akan menjadi lebih terang, seolah-olah sedang disaring. Jika lebih gelap, warnanya akan dikalikan.

.my-element {
  mix-blend-mode: hard-light;
}

Cahaya lembut

Mode campuran soft-light adalah versi yang lebih ringan dari overlay. Ini bekerja dengan cara yang sangat sama dengan kontras yang lebih sedikit.

.my-element {
  mix-blend-mode: soft-light;
}

Perbedaan

Cara yang baik untuk menggambarkan cara kerja difference mirip dengan cara kerja negatif foto. Mode campuran difference mengambil nilai selisih setiap piksel, membalikkan warna cahaya. Jika nilai warnanya identik, warna tersebut menjadi hitam. Perbedaan nilainya akan dibalik.

.my-element {
  mix-blend-mode: difference;
}

Pengecualian

Menggunakan exclusion sangat mirip dengan difference, namun alih-alih menampilkan warna hitam untuk piksel yang identik, warna akan menghasilkan abu-abu 50%, sehingga menghasilkan output yang lebih lembut dengan kontras yang lebih sedikit.

.my-element {
  mix-blend-mode: exclusion;
}

Mode gabungan yang tidak dapat dipisahkan

Anda dapat menganggap mode campuran ini seperti komponen warna HSL. Masing-masing mengambil nilai komponen tertentu dari lapisan aktif dan mencampurnya dengan nilai komponen lain.

Hue

Mode campuran hue mengambil hue dari warna sumber dan menerapkannya pada saturasi dan luminositas warna tampilan latar.

.my-element {
  mix-blend-mode: hue;
}

Saturasi

Perintah ini berfungsi seperti hue, tetapi menggunakan saturation sebagai mode campuran menerapkan saturasi warna sumber hingga hue dan luminositas warna tampilan latar.

.my-element {
  mix-blend-mode: saturation;
}

Warna

Mode campuran color akan membuat warna dari hue dan saturasi warna sumber dan luminositas warna tampilan latar.

.my-element {
  mix-blend-mode: color;
}

Luminositas

Terakhir, luminosity adalah kebalikan dari color. Fungsi ini menciptakan warna dengan luminositas warna sumber dan hue serta saturasi warna latar belakang.

.my-element {
  mix-blend-mode: luminosity;
}

Properti isolation

Dukungan Browser

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

Sumber

Jika Anda menetapkan isolation properti ini memiliki nilai isolate, hal itu akan membuat konteks penumpukan baru, yang akan mencegahnya menyatu dengan lapisan tampilan latar. Seperti yang Anda pelajari dalam modul indeks z, saat Anda membuat konteks tumpukan baru, lapisan tersebut menjadi lapisan dasar. Artinya, mode gabungan tingkat induk tidak akan berlaku lagi, tetapi elemen di dalam elemen dengan kumpulan isolation: isolate dapat masih digabungkan.

Perlu diketahui bahwa ini tidak berfungsi dengan background-blend-mode karena properti latar belakang sudah diisolasi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang mode campuran

Manakah dari berikut ini yang merupakan mode campuran CSS?

Perbedaan
🎉
Lighten
🎉
Mencerahkan
Coba lagi.
Dullen
Coba lagi.
Kali
🎉
Overlay
🎉

Jika Anda ingin memadukan berbagai warna dengan berbagai cara, gaya mode campuran manakah yang Anda perlukan?

Dapat dipisahkan
Mode campuran ini menampilkan efek bertarget saluran warna
Tidak dapat dipisahkan
Coba lagi. Fungsi non-dipisahkan tidak mengenali saluran warna