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ądarka | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| działanie | Tak | Nie | Tak | Tak | Tak |
Ź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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.