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

Czas czytania: < 1 minut

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

See the Pen mix-blend-mode generator by Aura (@Julka85) on CodePen.dark

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

Wsparcie przeglądarek:

PrzeglądarkaChromeIE / EdgeFirefoxSafariOpera
działanieTakNieTakTakTak

-> 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