15 CSS3 Blend Modes – ( Način Mešanja Piksela ) koji će Vam “Pojačati” Slike


15 CSS3 Blend Modes – ( Način Mešanja Piksela ) koji će Vam “Pojačati” Slike

Period za nama koji je obeležio Instagram i slični servisi, omogućili su nam da slike još dodatno poboljšamo efektima koji mogu da od amaterske fotografije brzo i lako naprave ako ne profesionalne fotografije, bar polu profesionalne fotke.

Nepravilnosti, loše osvetljenje, mnoge nedostatke, nadomestiće Blend Modes, jedna od velikih prednosti Photoshopa i njegova bitna karakteristika.

Spajanje dva pixela, jedan preko drugog može kreirati bezbroj kombinacija, mešavina. Recimo, ukoliko uzmemo Darker Color Blend Mode, Photoshop će renderovati tamniji od dva piksela. Blend Modovi mogu da proizvedu zapanjujuće efekte.

Photoshop nije izmislio Blend Modes, ali se definitivno najviše primenjuje u ovoj aplikaciji.
Za web i Web Dizajn mogućnost da se kroz CSS3 koristi Blend Modes i da Photoshop više nije neophodan u kreiranju ovih efekata na sajtovima, otkriva novu dimenziju.

Sam početak primene ove tehnike bio je obeležen kao expirementalan, ali sada već sve trenutne verzije Browsera podržavaju ove tehnologije (osim IE).

Kako koristiti background-blend-mode

Postoji veliki broj opcija blend mode, ali najkorisniji za naše svrhe je background-blend-mode. Ovo svojstvo omogućava nam da spojimo dve slike, ili sliku i boju pozadine.

Sledeći kod nam je potreban:

<div class="blend"></div>

I ovo je bazični CSS:

.blend
{
  width:782px;
  height:540px;
  background:#FFCB05 url("leptir-strazilovo.jpg") no-repeat center center;
}

Sada smo spremni da dodamo Blend Modes:

<div class="blend multiply"></div>

A potom ćemo kreirati drugo CSS pravilo:

blend.multiply
 {
  background-blend-mode: multiply;
 }

Multiply

Pomnožite, kao što samo ime ukazuje, množi osnovnu piksel boju sa blending bojom, što daje za rezultat tamniju boju.

background-blend-mode: multiply;

Screen

Screen CSS efekat meša inverznu od dve boje piksela. Screen efekat je suprotan od Multiply.

background-blend-mode: screen;

Overlay

Overlay-Preklapanje je kompleksan Blend Mode. Umnožavanje zavisi od osnovne boje: svetle boje postaju još svetlije, tamne boje još tamnije.

background-blend-mode: overlay;

Darken

Darken-od dva piksela koji se preklapaju bira se onaj tamniji.

background-blend-mode: darken;

Lighten

Lighten-od dva piksela koji se preklapaju bira se onaj svetlji.

background-blend-mode: lighten;

Color Dodge

Posvetljuje osnovnu boju da bi reflektovala boju za mešanje, smanjujući kontrast.

background-blend-mode: dodge;

Color Burn

Color burn je supratno od Color Dodge, potamnjuje osnovnu boju i rezultira većim kontrastom.

background-blend-mode: color-burn;

Hard light (Tvrdo svetlo)

Sledeći efekat je Hard light koji ukoliko je mešavina svetlija od 50% sive, čini sliku svetlijom i u suprotnom tamnijom. To je odličan način da se poboljšaju i istaknu senke na slici.

background-blend-mode: hard-light;

Soft light (Meko svetlo)

Soft light, koristi Dodge i Burn da bi dobili suptilan efekat.

background-blend-mode: soft-light;

Difference (Razlika)

Difference CSS efekat kao što i sama reč kaže, poredi dva piksela koja se preklapaju i oduzima boju sa većom osvetljenošću od drugog.

background-blend-mode: difference;

Exclusion (Izuzimanje)

Exclusion je sličan efekat Difference, ali on proizvodi manje kontrasta, tako da je više u upotrebi i manje je napadan.

background-blend-mode: exclusion;

Hue (Nijansa)

Koristi osvetljenost i zasićenost osnovne boje i nijanse u blending boji i spaja ih.

background-blend-mode: hue;

Saturation (Zasićenost)

Saturation, poput Hue efekta, spaja dve od vrednosti osnovne boje sa jednim od svojstva blending boje (bojom sa kojom se meša), u ovom slučaju zasićenije.

background-blend-mode: saturation;

Color

Color CSS efekat sledi isti obrazac kao Hue i Saturation, ovaj put ipak, to je osvetljenje od osnovne boje i nijanse i zasićenja blending boje.

background-blend-mode: color;

Luminosity (sjaj)

Luminosity je suprotan od Color efekta, i kombinuje nijanse i zasićenost osnovne boje i osvetljenja sa blending boje.

background-blend-mode: luminosity;

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest