Blending Modes di CSS: Color Theory dan Practical Application

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.

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:

1

div {

2

    background: 

3

    url(img/pattern.png), 

4

    url(img/jellyfish.jpg),  

5

    #f07e32 ;

6

}

Hal ini memberikan kita:

Dan kemudian kita dapat menambahkan mode blend ke dalam mix:

1

div {

2

    background: 

3

    url(img/pattern.png), 

4

    url(img/jellyfish.jpg),  

5

    #f07e32 ;

6

    background-blend-mode: screen;

7

}

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):

1

.my-overlay-element {

2

  background-color: #f07e32;

3

  background-image: url(img/jellyfish.jpg); // Note: This image will not be blended with the background color.

4

  mix-blend-mode: color-dodge;

5

}

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.

Screen:

1

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]

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.

Menggelapkan:

1

B(Cb, Cs) = min(Cb, Cs)

Memilih dua warna lebih gelap.

Penerangan:

1

B(Cb, Cs) = max(Cb, Cs)

Memilih yang lebih terang dari dua warna.

Color dodge:

1

if(Cb == 0)

2

    B(Cb, Cs) = 0

3

else if(Cs == 1)

4

    B(Cb, Cs) = 1

5

else

6

    B(Cb, Cs) = min(1, Cb / (1 - Cs))

Color dodge mencerahkan warna latar belakang untuk merefleksikan warna sumber.

Color burn:

1

if(Cb == 1)

2

    B(Cb, Cs) = 1

3

else if(Cs == 0)

4

    B(Cb, Cs) = 0

5

else

6

    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

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

Hard light:

1

if(Cs <= 0.5)

2

    B(Cb, Cs) = Multiply(Cb, 2 x Cs)

3

else

4

    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

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.

Overlay:

1

B(Cb, Cs) = HardLight(Cs, Cb)

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

Soft light:

1

if(Cs <= 0.5)

2

        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)

3

    else

4

        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)

5

with

6

    if(Cb <= 0.25)

7

        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb

8

    else

9

        D(Cb) = sqrt(Cb)

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".

Difference:

1

B(Cb, Cs) = | Cb - Cs |

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

Exclusion:

1

B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

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).

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.

1

ClipColor(C)

2

  l = Lum(C)

3

  n = min(Cred, Cgreen, Cblue)

4

  x = max(Cred, Cgreen, Cblue)

5

6

  if n < 0.0

7

    Cred = l + (((Cred - l) * l) / (l - n))

8

    Cgreen = l + (((Cgreen - l) * l) / (l - n))

9

    Cblue = l + (((Cblue - l) * l) / (l - n))

10

11

  if x > 1.0

12

13

    Cred = l + (((Cred - l) * (1 - l)) / (x - l))

14

    Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l))

15

    Cblue = l + (((Cblue - l) * (1 - l)) / (x - l))

16

17

  return C

18

19

SetLum(C, l)

20

  d = l - Lum(C)

21

  Cred = Cred + d

22

  Cgreen = Cgreen + d

23

  Cblue = Cblue + d

24

25

  return ClipColor(C)

26

27

Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

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:

1

B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

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

Saturation:

1

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

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

Color: 

1

B(Cb, Cs) = SetLum(Cs, Lum(Cb))

Menerapkan rona dan saturasi latar depan ke luminansi latar belakang. 

Luminosity

1

B(Cb, Cs) = SetLum(Cb, Lum(Cs))

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

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

• Check out what authors are doing with Photoshop actions dan blend modes over on Envato Market
• Read more about  <blend-mode> on Mozilla Developer Network
• Compositing And Blending In CSS oleh Sara Soueidan