CSS: mix-blend-mode – Pomagalnik

»mix-blend-mode« je CSS funkcija, ki nam omogoča zlivanje elementov na različne načine, kot so multiply, screen, darken, luminosity …

Kaj je mix-blend-mode?

»mix-blend-mode« je lastnost CSS, ki nam omogoča mešanje elementov na različne načine in posledično ustvarjanje zanimivih vizualnih učinkov. S pomočjo parametrov lahko določamo, kako se vsebina zlije z vsebino nadrejenega elementa in ozadja, podobno kot smo vajeni iz grafičnih programov, kot je Photoshop.
Vrednosti:

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;

Kako deluje?

Če za text element uporabimo »mix-blend-mode«, lahko nadzirate njegovo interakcijo z ozadjem. To pomeni, da ni važno kakšno je ozadje, belo ali črno ali slika, vsebina bo vedno izstopala.

Zakaj uporabljati mix-blend-mode?

Izboljša kontrast med besedilom in ozadjem, zaradi česar je vaša vsebina bolj berljiva in vizualno izpostavljena. Ustvarjamo lahko različna mešanja in wow efekte, ki se spreminjajo, ko uporabnik scrolla po strani.