Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Color
Webdesign

Blending Modes di CSS: Color Theory dan Practical Application

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Anda mungkin akrab dengan "mode blending" jika Anda merupakan pengguna Photoshop; hal ini memungkinkan Anda untuk menggabungkan lapisan dalam cara yang berbeda dan sangat menyenangkan untuk bermain dengan cara ini. Mode blending di CSS, bagaimanapun, tidak didukung secara universal, tetapi mereka pasti ada dijalannya.

Dalam tutorial ini, kita akan belajar bagaimana kerja blending mode dan cara yang berbeda yang dapat anda terapkan dalam blending mode menggunakan CSS.

Dasar-Dasar Blending

Jika Anda pernah temui mode blending, cara mereka bekerja mungkin tampak agak sulit untuk dipahami. Mari kita pecahkan.

Apa sebenarnya arti "blending mode" ?

Blending mode sudah tersedia dalam software desain selama bertahun-tahun, tapi konsep blending mode sebenarnya sudah digunakan untuk lebih lama, bahkan sebelum komputer diciptakan.

Bagian "blending" mode blending mengacu pada mengambil dua warna dan menggabungkan mereka dalam beberapa cara untuk membuat satu warna. Lebih tepatnya, kami mengambil dua peta pixel dan blend mereka bersama-sama.

Bagaimana blending yang terjadi adalah "mode" bagian dari blending mode. Bagaimana warna tersebut berinteraksi? Karena kita bekerja dengan ruang digital, kita dapat mengambil rumus matematika dan menerapkannya ke dua input untuk memperoleh output.

An untreated image of a jellyfish
Sebuah gambar ubur-ubur tak terawat
The same jellyfish with a solid orange layer placed over it
Ubur-ubur yang sama dengan layer orange solid ("sumber" kami) ditempatkan atasnya
Heres the orange layer with the screen blending mode applied
Berikut adalah lapisan sumber kita dengan "layar" blending mode diterapkan

Anda melakukan hitungan

Jika Anda merasa benar-benar ambisius, lihatlah dokumen compositing resmi Task Force W3C FX yang menjelaskan penerapan matematika dari masing-masing mode pencampuran yang berbeda.  Ini menunjukkan suatu formula yang digunakan untuk menghitung blending lebih.

Cm = B(Cb, Cs)
  • Di sini, Cm adalah warna resultan setelah blending.
  • B mengacu pada fungsi blending.
  • Variabel Cb adalah warna latar belakang.
  • Dan variabel Cs warna sumber.

Semua warna berdasarkan 0-1 skala, yang memetakan langsung ke nilai rgb 0-255.

Ada dua jenis blending mode. Pertama dianggap "non-separable", dan kedua (tidak mengejutkan) dianggap "separable". Apakah blending mode dianggap dipisahkan atau tidak ditentukan oleh algoritma yang mendasarinya. Jika algoritma memperlakukan masing-masing saluran terpisah warna (merah, hijau, dan biru) sama-sama, hal ini dianggap non-separable. Jika menggunakan masing-masing saluran warna secara individual, itu dianggap separable.

Semua blend mode hanya dapat mengembalikan warna dalam kisaran 0 hingga 255. Apa pun di luar rentang ini di kedua arah akan dipotong ke dalam kisaran. Ketika Anda melihat area besar putih atau hitam di area yang dicampur, hal ini mungkin karena daerah tersebut menjadi terpotong.

Jenis Blending Mode yang Tersedia dalam CSS

CSS blending mode, yang mendukung bekerja dalam dua cara yang berbeda. Jenis pertama dari modus blend disebut background-blend-mode. Properti ini memungkinkan Anda untuk mencampur semua background dalam satu elemen dengan satu sama lain.

Jika Anda telah menetapkan, untuk contoh, beberapa backgrpund gambar (didukung di semua browser luar IE8), gambar background  pertama akan diperlakukan sebagai lapisan sumber, dan gambar apapun yang ditambahkan setelah itu akan diperlakukan sebagai lapisan background berbaring di bawahnya.

Menambahkan warna background (yang harus terakhir dalam daftar) menempatkan lapisan lain di bagian bawah. Warna akan diperlakukan sebagai lapisan background, dan gambar sebagai lapisan sumber. Ambil aturan gaya berikut, misalnya:

Hal ini memberikan kita:

Dan kemudian kita dapat menambahkan mode blend ke dalam mix:

Berikut adalah dua divs menggunakan gaya ini, satu tanpa modus blending, yang kedua dengan:

Sekunder blending mode jenis, mix-blend-mode, yang memungkinkan untuk unsur-unsur yang independen agar dicampur bersama-sama. Spesifikasi lebih spesifik tentang pelaksanaan, tetapi blending terjadi dalam "stacking contexts".

Ini adalah apa yang terjadi ketika kita menggunakan mix-blend-mode, mencoba untuk mendapatkan gambar backround dan warna dalam satu unsur yang sama untuk berbaur (sangat sedikit):

Di bawah ini, Anda dapat menemukan sebuah demo interaktif untuk menjelajahi efek modus blend tertentu.

Pemisahan Blend Mode

Mari kita lihat pada mode blending tersedia, dengan memeriksa rumus yang digunakan, dan menerapkan masing-masing untuk lingkaran merah ditempatkan di atas ubur-ubur kita.

Mode Blend tidak diterapkan

Screen:

Screen ini dinamai setelah konsep memproyeksikan beberapa eksposur foto pada saat yang sama pada satu layar. Warna yang dihasilkan setidaknya ringan seperti salah satu lapisan dicampur.

Screen blend mode
Screen blend mode 

Menggelapkan:

Memilih dua warna lebih gelap.

Darken blend mode
Menggelapkan mode blend

Penerangan:

Memilih yang lebih terang dari dua warna.

Lighten blend mode
Menerangkan blend mode

Color dodge:

Color dodge mencerahkan warna latar belakang untuk merefleksikan warna sumber.

Color dodge blend mode
Mode blend Color dodge

Color burn:

Color Burn menggelapkan warna latar belakang, meningkatkan kontras antara sumber dan latar belakang.

Color burn blend mode
Mode blend color burn

Hard light:

Berlaku "mengalikan" pada warna yang lebih ringan dan "screen" pada yang lebih gelap. Pada dasarnya, "hsrd light" adalah lawan dari "overlay", yang akan kita lihat berikutnya.

Hard light blend mode
Blend mode hard light

Overlay:

Berlaku "screen" pada warna lebih terang dan "mengalikan" pada warna yang lebih gelap; ditulis sama sebagai "hard light", kecuali dengan argumen ke fungsi terbalik.

Overlay blend mode
Blend mode overlay

Soft light:

Mode blend ini berlaku varian "mengalikan" pada nilai-nilai yang gelap dan varian "layar" pada nilai-nilai lebih ringan (mirip dengan layar).

Dalam algoritma ini, kita melihat fungsi kedua D yang di set dalam with klausa berdasarkan nilai biru yang hadir dalam warna. Biasanya, hasil akhirnya adalah efek yang jauh lebih lembut daripada "tampilan".

Sof light blend mode
Blend mode sof light

Difference:

Difference mengambil nilai absolut perbedaan antara dua warna, yang memiliki efek foto negatif.

Difference blend mode
Blend mode difference

Exclusion:

Modus pengecualian memiliki efek dasar yang sama sebagai "perbedaan" mode, kecuali bahwa warna yang sama menghasilkan nilai tengah kontras yang lebih rendah (bukan nilai gelap).

Exclusion blend mode
Blend mode exclusion

Blending mode Non-separable

Blending mode "non-separable" memanfaatkan beberapa fungsi tambahan, termasuk fungsi ClipColor, SetLum fungsi dan fungsi Sat.

Catatan penting: ada versi Safari mendukung "hue", "saturasi", "warna", atau "kecemerlangan" blend mode dengan mix-blend-mode atau background-blend-mode.

Perhatikan fungsi utilitas min , mid , dan max mengacu pada nilai minimum, tengah, dan maksimum. (Pertengahan adalah tidak rata-rata tiga nilai). Nilai-nilai Cred, Cgreen, dan Cblue merujuk pada nilai merah, hijau, dan biru yang hadir dalam warna C.

Dengan definisi ini, sekarang kita dapat melihat blending mode dipisahkan.

Hue:

Mode ini berlaku rona dari lapisan sumber untuk luminance dan saturasi warna latar belakang.

Hue blend mode
Blend mode hue

Saturation:

Mode ini melakukan hal yang sama dengan mode "hue", tetapi menerapkan kejenuhan latar depan ke rona dan pencahayaan latar belakang. 

Saturation blend mode
Blend mode saturation

Color: 

Menerapkan rona dan saturasi latar depan ke luminansi latar belakang. 

Color blend mode
Blend mode color

Luminosity

Mode ini menerapkan luminositas lapisan sumber dengan rona dan saturasi lapisan latar belakang. 

Luminosity blend mode
Blend mode luminosity

Kesimpulan

Mode blend dalam CSS memberikan fleksibilitas baru dan menarik untuk desain dan pengalaman estetika yang unik.  Memahami matematika dan teori warna yang berlaku untuk masing-masing mode blend yang tersedia memberi Anda perangkat yang lebih holistik. 

Apa yang akan Anda lakukan ketika browser terus menambahkan dukungan untuk mode blend? 

Related Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.