Cum folosim CSS3 Blend Mode | 15 Moduri de Contopire CSS3

Încă de mic copil îmi plăcea să mă joc în Photoshop, experimentam fiecare efect, bifam toate setările, decupam, puneam laolaltă. După un timp am descoperit și „Blend Mode” iar după ce am înțeles cum funcționează am trecut la un alt nivel în designul grafic.

Partea bună este că în momentul de față CSS-ul este capabil de așa ceva. Adăugând câteva linii de cod CSS poți obține cu ușurință efectul dorit.

Ce se întâmplă de fapt ?

În primul rând este nevoie de 2 elemente suprapuse unul peste altul. Celui de sus i se va atribui proprietatea de translucență permițând celui de jos să se vadă prin cel de deasupra.

Cum folosim „background-blend-mode”

Acest efect permite combinarea, mixarea a două sau mai multe imagini chiar și diferite.
Pe de altă parte imaginea aleasă se poate contopi și cu fundalul, indiferent de culoarea sau culorile sale.

În primul rând vom atribui o clasă containerului de care aparține imaginea:

Urmează adăugarea proprietăților de stil:

Urmează adăugarea modurilor de contopire.
Pentru a putea face asta vom adaugă un o a doua clasă lângă cel existent:

În ultimul pas vom crea o un stil pentru cele două clase:

Iar acum să înceapă editarea magică, în următoarea parte vă voi prezenta 15 Blend Mode-uri, fiecare în parte.

MULTIPLY

Multiply multiplică pixelii de bază și le contopește rezultând culori mai închise. Multiplicând negru cu negru va rămâne negru iar multiplicând alb imaginea va rămâne neschimbată.

SCREEN

Sreen multiplică inversul a două culori de pixel. Defapt este opusul Multiply-ului însemnând că folosirea screen-ului pe alb va rezulta o imagine albă, iar pe negru imaginea va rămâne neschimbată.

OVERLAY

Overlay este o proprietate foarte complexă care depinde de culorile de bază. Culorile deschise se intensifică pozitiv iar cele închise se intensifică negativ, adică devin și mai întunecate.

DARKEN

Darken întunecă culorile. Compară cei 2 pixeli suprapuși și elimină pe cel mai deschis la culoare lăsându-l doar pe cel mai întunecat.

LIGHTEN

Lighten este exact opusul darken-ului. Compară cei 2 pixeli suprapuși și elimină pe cel mai închis la culoare lăsându-l doar pe cel mai iluminat.

COLOR DODGE

Color Dodge luminează culoare de bază pentru a reflecta-o la culoarea de deasupra scăzându-i contrastul.

COLOR BURN

Color Burn este opusul Color Dodge-ului, adică întuneca culoare de bază pentru a reflecta-o la culoarea de deasupra mărindu-i contrastul.

HARD LIGHT

Hard Light fie folosește proprietățile Multiply-ului fie proprietățile Screen-ului. Dacă imagine de deasupra este mai luminoasă de 50% gri atunci imaginea va deveni mai luminoasă iar în caz contrar va fi mai întunecată. Este o bună metodă de a intensifica părțile luminoase și
cele întunecate în același timp rezultând și un contrast înalt.

SOFT LIGHT

Soft Light este similar Hard Light-ului dar în loc de Multiply și Screen folosește proprietățile Dodge-ului și al Burn-ului rezultând un efect mai fin.

DIFFERENCE

Difference compară cei 2 pixeli suprapuși și sustrage culoarea mai deschisă din celălalt pixel.

EXCLUSION

Exclusion este similar Difference-ului dar rezultatul va avea un contrast mai mic.

HUE

Hue este probabil cel mai puțin folosit și deranjant efect. Folosește luminozitatea și saturația pixelilor de bază cât și celor de deasupra urmând să la unească.

SATURATION

Saturation este similar Hue-ului urmând același proces excluzând luminozitatea elementului de deasupra. Adică folosește luminozitatea și saturația pixelilor de bază și doar proprietatea de saturație a celui de sus.

COLOR

Color este conceput din același proces că și Hue și Saturation. De această dată însă folosește doar luminozitatea pixelilor de bază și proprietatea de Hue și saturație a celui de sus.

LUMINOSITY

Luminosity este opusul Color-ului. Defapt contopește Hue-ul și Saturation-ul pixelului de bază cu luminozitatea pixelului de deasupra.

Sper că te-am ajutat să înțelegi cum să editezi imaginile folosind CSS3 Blend Mode și mulțumesc pentru timpul acordat!