Tryby mieszania

The CSS Podcast - 024: Blend Modes

Duotone to popularna metoda kolorowania zdjęć, która sprawia, że obraz wygląda tak, jakby składał się tylko z 2 kontrastowych kolorów: jednego dla światła i drugiego dla cienia. Jak to zrobić za pomocą CSS?

Za pomocą trybów mieszania i innych poznanych technik, takich jak filtry i pseudoelementy, możesz zastosować ten efekt do dowolnego obrazu.

Co to jest tryb mieszania?

Tryby mieszania są często używane w narzędziach do projektowania, takich jak Photoshop, do tworzenia efektu kompozycji przez mieszanie kolorów z co najmniej 2 warstw. Zmieniając sposób mieszania kolorów, możesz uzyskać naprawdę interesujące efekty wizualne. Tryby mieszania możesz też stosować jako narzędzie, na przykład do izolowania obrazu z białym tłem, aby wyglądał na przezroczysty.

W CSS możesz używać większości trybów mieszania dostępnych w narzędziu do projektowania, korzystając z właściwości mix-blend-mode lub background-blend-mode. Opcja mix-blend-mode stosuje mieszanie do całego elementu, a opcja background-blend-mode stosuje mieszanie do tła elementu.

Używasz background-blend-mode, gdy masz kilka elementów tła i chcesz je ze sobą zmieszać.

Atrybut mix-blend-mode wpływa na cały element, w tym na jego pseudoelementy. Jeden z takich przypadków to przykładowy obraz duotonowy, w którym warstwy kolorów są stosowane do elementu za pomocą pseudoelementów.

Tryby mieszania dzielą się na 2 kategorie: rozdzielne i nierozdzielne. Tryb mieszania rozdzielczego uwzględnia każdy składnik koloru, taki jak RGB, osobno. Tryb mieszania nierozłączalnego uwzględnia wszystkie komponenty koloru w równym stopniu.

Zgodność z przeglądarką

mix-blend-mode

background-blend-mode

Odłączalne tryby mieszania

Normalny

Jest to domyślny tryb mieszania, który nie zmienia sposobu mieszania elementów.

Mnożenie

Tryb multiply przypomina nakładanie na siebie wielu przezroczystych warstw. Białe piksele będą przezroczyste, a czarne – czarne. Wszystkie wartości pośrednie będą mnożone przez wartości jasności (światła). Oznacza to, że jasne obszary stają się jaśniejsze, a ciemne ciemniejsze, co najczęściej powoduje, że wynik jest ciemniejszy.

.my-element {
  mix-blend-mode: multiply;
}

Ekran

Użycie screen powoduje pomnożenie wartości light (co jest odwrotnym efektem niż w przypadku multiply) i zazwyczaj daje jaśniejszy obraz.

.my-element {
  mix-blend-mode: screen;
}

Nakładka

Ten tryb mieszania (overlay) łączy multiply i screen. Ciemne kolory stają się ciemniejsze, a jasne jaśniejsze. Kolor szary w połowie skali nie jest na to podatny.

.my-element {
  mix-blend-mode: overlay;
}

Przyciemnienie

Tryb mieszania darken porównuje jasność ciemnych kolorów obrazu źródłowego i obrazu tła i wybiera ten, który jest najciemniejszy. Dokonuje tego, porównując wartości RGB zamiast jasności (jak w przypadku funkcji multiply i screen) w przypadku każdego kanału kolorów. W przypadku atrybutów darken i lighten często tworzy się nowe wartości kolorów na podstawie tego procesu porównywania.

.my-element {
  mix-blend-mode: darken;
}

Jaśniej

Użycie lighten powoduje dokładnie odwrotny efekt niż darken.

.my-element {
  mix-blend-mode: lighten;
}

Rozjaśnienie

Jeśli użyjesz color-dodge, kolor tła zostanie rozjaśniony, aby odzwierciedlać kolor źródłowy. Tryb ten nie ma wpływu na czyste czarne kolory.

.my-element {
  mix-blend-mode: color-dodge;
}

Ściemnianie

Tryb color-burn jest bardzo podobny do trybu multiply, ale zwiększa kontrast, co powoduje nasycenie średnich tonów i zmniejszenie jasnych obszarów.

.my-element {
  mix-blend-mode: color-burn;
}

Ostre światło

Użycie hard-light tworzy żywy kontrast. Ten tryb mieszania powoduje zsumowanie lub pomnożenie wartości jasności. Jeśli wartość piksela jest jaśniejsza niż 50% szarości, obraz jest rozjaśniany, jakby był przyciemniony. Jeśli jest ciemniejszy, oznacza to mnożenie.

.my-element {
  mix-blend-mode: hard-light;
}

Łagodne światło

Tryb soft-light jest łagodniejszą wersją trybu overlay. Działa on w bardzo podobny sposób, ale z mniejszym kontrastem.

.my-element {
  mix-blend-mode: soft-light;
}

Różnica

difference działa trochę jak negatyw. Tryb mieszania difference bierze wartość różnicy każdego piksela, odwracając jasne kolory. Jeśli wartości kolorów są identyczne, stają się czarne. Różnice w wartościach zostaną odwrócone.

.my-element {
  mix-blend-mode: difference;
}

Wykluczenia

Funkcja exclusion jest bardzo podobna do funkcji difference, ale zamiast zwracania czerni dla identycznych pikseli zwraca szarość na poziomie 50%, co powoduje uzyskanie łagodniejszego obrazu o mniejszym kontraście.

.my-element {
  mix-blend-mode: exclusion;
}

Nierozłączne tryby mieszania

Te tryby mieszania można traktować jako kolory w skali HSL. Każdy z nich pobiera określoną wartość komponentu z aktywnej warstwy i miesza ją z innymi wartościami komponentów.

Odcień

Tryb mieszania hue pobiera barwę źródłową i stosuje ją do nasycenia oraz jasności koloru tła.

.my-element {
  mix-blend-mode: hue;
}

Nasycenie

Działa on podobnie do hue, ale użycie trybu mieszania saturation powoduje zastosowanie nasycenia koloru źródłowego do barwy i jasności koloru tła.

.my-element {
  mix-blend-mode: saturation;
}

Kolor

Tryb mieszania color tworzy kolor na podstawie barwy i nasycenia koloru źródłowego oraz jasności koloru tła.

.my-element {
  mix-blend-mode: color;
}

Jasność

Ostatnia funkcja to luminosity, która jest odwrotnością funkcji color. Tworzy kolor o jasności koloru źródłowego oraz barwie i nasyczeniu koloru tła.

.my-element {
  mix-blend-mode: luminosity;
}

Właściwość isolation

Jeśli ustawisz w przypadku właściwości isolation wartość isolate, zostanie utworzony nowy kontekst nakładania, który uniemożliwi mieszanie się z warstwą tła. Jak już wiesz z modułu o poziomie Z, po utworzeniu nowego kontekstu nakładania ta warstwa staje się warstwą podstawową. Oznacza to, że tryby mieszania na poziomie elementu nadrzędnego nie będą już stosowane, ale elementy wewnątrz elementu z ustawionym isolation: isolate nadal mogą się mieszać.

Pamiętaj, że ta opcja nie działa w przypadku właściwości background-blend-mode, ponieważ właściwości tła są już izolowane.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o trybach mieszania