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

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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.


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 w CSS – ciekawe efekty na stronę internetową

Ź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