Mieszanie kolorów z selektorem mix-blend-mode [CSS]

Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim.

Efekt końcowy jest podobny do tego jaki uzyskujemy podczas mieszania kolorów w różnych programach do grafiki rastrowej. Czyli część kolorów (na poziomie pixela) w wierzchnim obiekcie zostaje zastąpiona mieszczącymi się aktualnie pod nimi.

Wartości przyjmowane przez mix-blend-mode:

mix-blend-mode przyjmuje kilka różnych wartości.

• normal – domyślne ustawienie
• multiply;
• screen;
• overlay;
• darken;
• lighten;
• color-dodge;
• color-burn;
• hard-light;
• soft-light;
• difference;
• exclusion;
• hue;
• saturation;
• color;
• luminosity;

Globalne wartości

• initial;
• inherit;
• unset;

Jak widać tych opcji jest całkiem sporo. W związku z tym zdecydowałam się z pomocą AngularJS przygotować prosty generator. Z jego pomocą będziecie mogli nieco bliżej przyjrzeć się każdej z nich.

Przykładowe zastosowania

Poniżej możecie przetestować działanie poszczególnych ustawień właściwości

Jak widać można uzyskać bardzo ciekawe i zróżnicowane efekty. Przy tak naprawdę niewielkim nakładzie.

Wsparcie przeglądarek:

Przeglądarka	Chrome	IE / Edge	Firefox	Safari	Opera
działanie	Tak	Nie	Tak	Tak	Tak

-> Filtry graficzne na stronę

Źródła:

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

http://webkod.pl/kurs-css/wlasciwosci/wszystkie/mix-blend-mode

Dodatkowe tagi:
mieszanie kolorów z tła
prześwitujący obrazek