CSS kolorno miksovanje - blend modovi

Efekat kolornog miksovanja, tj. CSS blending, služi da odredimo način na koji će se kreirati prikaz kada imamo jedan elemenat preko drugog. Ovo je prilično česta pojava, pošto praktično uvek imamo situaciju u kojoj se element nalazi unutar nekog drugog ("kontejnerskog") elementa ili se zahvaljujući pozicioniranju, preklapa sa drugim elementima.

Uobičajena situacija je da element ili makar njegov tekst "pokriva" ono što se nalazi ispod. Osnovni način na koji možemo videti neko mešanje boja elementa u prvom planu i elementa u pozadini je zadavanjem stepena providnosti, atributom opacity. Providnost se može zadati i unutar rgba() kolorne vrednosti, a takođe i PNG ili SVG slike mogu imati poluprovidne delove. U tom slučaju se rezultujući prikaz dobija prostim uprosečavanjem boja na tim polu-providnim mestima.

Međutim, ovo je samo vrh ledenog brega. CSS omogućava kolorno miksovanje koje je slično efektima za kombinovanje slojeva (layers) u programima za obradu grafike, poput Photoshopa. Ovo su tzv. blend-modovi, koji su nam dostupni:

Svaki od ovih efekata predstavlja algoritam, odnosno matematičku operaciju koja se vrši nad bojama svakog piksela elementa za koji je zadat. U daljem tekstu ćemo elemenat koji "ide preko" nazivati "gornji" a elemenat koji se nalazi u pozadini i sa kojim se vrši mešanje boja ćemo nazivati "donji". Inače, blending mod se uvek zadaje gornjem elementu. Moguće su i kombinacije različitih blending modova kada imamo više preklapajućih elemenata.

Za razliku od CSS filter-funkcija, ovde ne možemo podesiti intenzitet "primene" efekta, kao što ni sama kolorna miksovanja ne mogu biti animirana. Međutim, ako se setimo da elementi mogu imati promenljiv opacity, dolazimo do "zaobilaznog" načina kako bismo zadali intenzitet efekta - koliko je elemenat vidljiv ili providan, definiše i koliko "snažno" će biti primenjen efekat. Uz to, opacity može biti animiran.

Blending modove možemo zadati pomoću dva atributa:

• mix-blend-mode - za definisanje kolornog miksovanja celog elementa
• background-blend-mode - za definisanje kolornog miksovanja pozadinskih slika (pod uslovom da smo ih zadali više)

Atribut mix-blend-mode se zadaje elementu kako bi se definsalo kako će se preklapati boje tog elementa sa bilo čime što se nalazi u njegovoj pozadini. To može biti boja pozadine ili pozadinska slika kontejnerskog elementa, ali isto tako i neki sasvim drugi elementi, pošto je elemenat moguće pozicionirati npr. apsolutno ili fiksno.

Drugi atribut - background-blend-mode se odnosi na međusobno miksovanje slika u pozadini, zadatih grupom background atributa. Ovom atributu je moguće zadati i čitavu listu blending modova, ako imamo više slika u pozadini. Ovo važi i za klasične unapred pripremljene slike, kao i za proceduralne gradiente.

Blend modovi ukratko

U ovom odeljku ćemo se pozabaviti matematičkim transformacijama koje stoje iza svakog blending moda.

normal
multiply
screen
overlay

Efekat multiply se dobija množenjem kolornih vrednosti donje i gornje boje. Šta to u stvari znači? Kao što znamo svaka boja se sastoji iz tri komponente - crvene, zelene i plave (RGB sistem boja). Kada se kombinuju dve boje, računar svaku od RGB komponenti (koje imaju vrednosti u rasponu od 0 do 255) preračuna u raspon od 0 do 1. Onda se sa tim vrednostima obavljaju matematičke operacije, zavisno od toga kakav efekat treba da se postigne.

Kao što smo rekli, kolorne komonente se kod multiply efekta, množe. Dakle, ako sa 0 obeležimo kolornu komponentu donje boje, a sa 1 kolornu komponentu gornje boje, onda se nova boja dobija međusobnim množenjem svake komponente:

Pošto se svaka komponenta računa na potpuno isti način, ne moramo da pišemo sve tri formule, već samo jednu, koja važi za svaku komponentu:

Logično, pošto vrednost 0.0 (najtamnija) anulira bilo šta sa čime se pomnoži, a vrednost 1.0 (najsvetlija) ne utiče na bilo šta sa čime se pomnoži, dolazimo do rezultata multiply efekta - crna boja uvek zacrnjuje, bela nema efekat - kao kada preklapamo dve providne folije.

Da se vratimo sada korak unazad - kada ne zadamo nikakvo kolorno miksovanje, podrazumevana vrednost je normal. To znači da gornja boja potpno prekriva donju - nema mešanja, nema nikakve kombinacije ni matematike:

Naravno, u slučaju da postoji zadata određena poluprovidnost preko atributa opacity, tada se gornja i donja boja uprosečavaju - zavisno od vrednosti:

Na isti način, preko opacity vrednosti, možemo kontrolisati "intenzitet" multiply efekta. Formula bi glasila:

Nije nam ideja da toliko detaljno ulazimo u matematiku - formule nam služe samo da ilustrujemo ideju koja stoji iza svakog kolornog miksovanja, pa ćemo ubuduće da zanemarimo opacity vrednost.

Efekat screen je zamišljen kao suprotnost multiply efektu. Originalna i nova boja se invertuju, zatim se množe i dobijena boja ponovo invertuje.

Crna boja nema efekat, a bela uvek "zabeljuje" - kao kada dve slike projektujemo jednu preko druge na belom platnu.

Konačno, efekat overlay predstavlja kombinaciju multiply i screen efekta. Ako je donja boja tamna, radi se multiply, a screen ako je svetla (gleda se da li je ispod ili iznad polovine mogućeg intenziteta).

darken
lighten

Vrednost darken suštinski kombinuje tamnije nijanse obe boje. Boja se dobija tako što se za svaku RGB kolornu komponentu gornje i donje boje, izabere manja (tamnija) vrednost.

Logično, postojaće i suprotna blend vrednost - lighten kod koje se boja dobija tako što se pri upoređivanju donje i gornje boje, uvek bira veća (svetlija) vrednost.

color-dodge
color-burn

Ovi efekti spadaju među najupečatljivije. Efekat color-dodge je sličan screen vrednosti, samo što je ukupan efekat "agresivniji". Dobija se kada se vrednost donje boje podeli invertovanom vrednošću gornje boje.

Slično tome, efekat color-burn podseća na multiply, samo još snažniji - sa jačim kontrastima i bojama. Donja boja se invertuje, zatim deli vrednošću gornje boje, pa se dobijena vrednost ponovo invertuje:

hard-light
soft-light

Efekat hard-light je matematički veoma sličan overlay efektu - praktično to overlay samo kada bismo obrnuli gornju i donju boju. Ako je gornja boja tamna, radi se multiply, a screen u suprotnom. Krajnji efekat je kao da smo usmerili snažno svetlo sa novom slikom ka originalnoj pozadini.

Efekat soft-light (iako matematički dosta drugačiji) se po rezultatu može opisati kao hard-light slabijeg intenziteta. Formula je verovatno najkomplikovanija od svih...

difference
exclusion

Kod efekta difference, tamnija boja se oduzima od svetlije. To znači da crna neće imati efekta, dok će bela invertovati drugu boju.

Efekat exclusion ima drugačiju formulu, ali rezultat izgleda kao difference sa umanjenim kontrastom.

hue
saturation
color
luminosity

Ova četiri blend moda se računaju na potpuno drugačiji način od prethodnih. Pre svega, ne uzima se RGB kombinacija, već se posmatra HSL kolorni sistem. Takođe, ne radi se svaka komponenta na isti način, već se sada svaka komponenta računa drugačije. Kada se zada vrednost hue, koristi se nijansa (hue) gornje boje, a zasićenje i svetlina se uzimaju od donje boje:

Slično tome, kod efekta saturation, koristi se zasićenje (saturation) gornje, a nijansa i svetlina donje boje:

Time efikasno možemo da podešavamo gde će boja biti intenzivnija (drečavija), a gde pastelnija (sivlja).

Blending mod color koristi zasićenje i nijansu gornje boje, a samo svetlinu donje, čime lako postižemo "monohromatski" efekat (slično kao propuštanje slike kroz jednobojni filter):

Najzad, efekat luminosity koristi svetlinu (luminosity) gornje, a nijansu i zasićenost donje boje:

Ovim efektom možemo lako podesiti svetlije i tamnije delove slike.

Primeri kolornog miksovanja

Do sada smo se bavili teorijom, a sada ćemo videti kako blend-modovi funkcionišu u praksi.

<style>
  .ef-multiply { background-blend-mode: multiply, normal; }
  .ef-screen { background-blend-mode: screen, normal; }
  .ef-overlay { background-blend-mode: overlay, normal; }
  .ef-darken { background-blend-mode: darken, normal; }
  .ef-lighten { background-blend-mode: lighten, normal; }
  .ef-color-dodge { background-blend-mode: color-dodge, normal; }
  .ef-color-burn { background-blend-mode: color-burn, normal; }
  .ef-hard-light { background-blend-mode: hard-light, normal; }
  .ef-soft-light { background-blend-mode: soft-light, normal; }
  .ef-difference { background-blend-mode: difference, normal; }
  .ef-exclusion { background-blend-mode: exclusion, normal; }
  .ef-hue { background-blend-mode: hue, normal; }
  .ef-saturation { background-blend-mode: saturation, normal; }
  .ef-color { background-blend-mode: color, normal; }
  .ef-luminosity { background-blend-mode: luminosity, normal; }

  .original {
    background-image: url("img/pic-angie.jpg");
/*    background-image: url("img/pic-girl-with-doll.jpg");  */
  }
  .primer-1 {
    background-image: 
      linear-gradient(90deg, rgba(0,0,0, 0.8), rgba(255,255,255, 0.8)),
      url("img/pic-angie.jpg");
  }
</style>

<div class="original"> Original </div>
<div class="primer-1"> normal </div>
<div class="primer-1 ef-multiply"> multiply </div>
<div class="primer-1 ef-screen"> screen </div>
<div class="primer-1 ef-overlay"> overlay </div>
<div class="primer-1 ef-darken"> darken </div>
<div class="primer-1 ef-lighten"> lighten </div>
<div class="primer-1 ef-color-dodge"> color-dodge </div>
<div class="primer-1 ef-color-burn"> color-burn </div>
<div class="primer-1 ef-hard-light"> hard-light </div>
<div class="primer-1 ef-soft-light"> soft-light </div>
<div class="primer-1 ef-difference"> difference </div>
<div class="primer-1 ef-exclusion"> exclusion </div>
<div class="primer-1 ef-hue"> hue </div>
<div class="primer-1 ef-saturation"> saturation </div>
<div class="primer-1 ef-color"> color </div>
<div class="primer-1 ef-luminosity"> luminosity </div>

<style>
  .ef-multiply { background-blend-mode: multiply, normal; }
  .ef-screen { background-blend-mode: screen, normal; }
  .ef-overlay { background-blend-mode: overlay, normal; }
  .ef-darken { background-blend-mode: darken, normal; }
  .ef-lighten { background-blend-mode: lighten, normal; }
  .ef-color-dodge { background-blend-mode: color-dodge, normal; }
  .ef-color-burn { background-blend-mode: color-burn, normal; }
  .ef-hard-light { background-blend-mode: hard-light, normal; }
  .ef-soft-light { background-blend-mode: soft-light, normal; }
  .ef-difference { background-blend-mode: difference, normal; }
  .ef-exclusion { background-blend-mode: exclusion, normal; }
  .ef-hue { background-blend-mode: hue, normal; }
  .ef-saturation { background-blend-mode: saturation, normal; }
  .ef-color { background-blend-mode: color, normal; }
  .ef-luminosity { background-blend-mode: luminosity, normal; }

  .original {
    background-image: url("img/pic-angie.jpg");
  }
  .primer-1 {
    background-image: 
      linear-gradient(90deg, rgba(255,128,0, 0.8), rgba(0,255,128, 0.8)),
      url("img/pic-angie.jpg");
  }
</style>

<div class="original"> Original </div>
<div class="primer-1"> normal </div>
<div class="primer-1 ef-multiply"> multiply </div>
<div class="primer-1 ef-screen"> screen </div>
<div class="primer-1 ef-overlay"> overlay </div>
<div class="primer-1 ef-darken"> darken </div>
<div class="primer-1 ef-lighten"> lighten </div>
<div class="primer-1 ef-color-dodge"> color-dodge </div>
<div class="primer-1 ef-color-burn"> color-burn </div>
<div class="primer-1 ef-hard-light"> hard-light </div>
<div class="primer-1 ef-soft-light"> soft-light </div>
<div class="primer-1 ef-difference"> difference </div>
<div class="primer-1 ef-exclusion"> exclusion </div>
<div class="primer-1 ef-hue"> hue </div>
<div class="primer-1 ef-saturation"> saturation </div>
<div class="primer-1 ef-color"> color </div>
<div class="primer-1 ef-luminosity"> luminosity </div>

<style>
  .ef-multiply { mix-blend-mode: multiply; }
  .ef-screen { mix-blend-mode: screen; }
  .ef-overlay { mix-blend-mode: overlay; }
  .ef-darken { mix-blend-mode: darken; }
  .ef-lighten { mix-blend-mode: lighten; }
  .ef-color-dodge { mix-blend-mode: color-dodge; }
  .ef-color-burn { mix-blend-mode: color-burn; }
  .ef-hard-light { mix-blend-mode: hard-light; }
  .ef-soft-light { mix-blend-mode: soft-light; }
  .ef-difference { mix-blend-mode: difference; }
  .ef-exclusion { mix-blend-mode: exclusionl; }
  .ef-hue { mix-blend-mode: hue; }
  .ef-saturation { mix-blend-mode: saturation; }
  .ef-color { mix-blend-mode: color; }
  .ef-luminosity { mix-blend-mode: luminosity; }

  .kont {
    opacity: 0.8;
  }
  
  .original {
    background-image: url("img/pic-smederevo.jpg");
  }
  
  .t1 { color: #200; }
  .t2 { color: #ffd; }
  .t3 { color: #a6f; }
</style>

<div class="original">normal <div class="kont">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">multiply <div class="kont ef-multiply">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">screen <div class="kont ef-screen">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">overlay <div class="kont ef-overlay">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">darken <div class="kont ef-darken">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">lighten <div class="kont ef-lighten">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">color-dodge <div class="kont ef-color-dodge">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">color-burn <div class="kont ef-color-burn">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">hard-light <div class="kont ef-hard-light">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">soft-light <div class="kont ef-soft-light">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">difference <div class="kont ef-difference">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">exclusion <div class="kont ef-exclusion">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">hue <div class="kont ef-hue">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">saturation <div class="kont ef-saturation">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">color <div class="kont ef-color">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>
<div class="original">luminosity <div class="kont ef-luminosity">
  <p class="t1">TEXT</p> <p class="t2">TEXT</p> <p class="t3">TEXT</p> 
</div></div>

Izazovi i rešenja

Kolorno miksovanje se može efikasno upotrebiti u svhu maskiranja. Na taj način npr. tekst može poslužiti kao maska za sliku radi postizanja određenog efekta. Prvi primer prikazuje jedan takav slučaj - kada se slika dovede u crno-belu verziju, a jedino što ostane u boji je tekst koji ide preko slike.

Drugi primer je sličan, ali možda čak i atraktivniji - sliku koristimo kao teksturu kojom bojimo slova.

Znamo da blending modovi ne mogu biti animirani, ali isto tako znamo da njihov "intenzitet" možemo kontrolisati menjanjem providnosti elementa. U poslednjem primeru smo, koristeći tu tehniku, simulirali animaciju prelaska jednog blendinga u drugi.