Tryby mieszania

Podcast CSS – 024: tryby mieszania .

Duotone to popularne zabiegi kolorystyczne. co sprawia, że obraz wygląda, jakby składał się tylko z dwóch kontrastujących kolorów: jedno dla najjaśniejszych miejsc, a drugie do słabego oświetlenia. Jak to jednak zrobić, korzystając z CSS?

Korzystając z trybów mieszania i innych poznanych technik, takich jak filtry i pseudoelements – można zastosować ten efekt do dowolnego obrazu.

Co to jest tryb mieszania?

Tryby mieszania są powszechnie używane w narzędziach do projektowania, takich jak Photoshop aby uzyskać efekt kompozycyjny, mieszając kolory z co najmniej 2 warstw. Zmieniając sposób mieszania kolorów, można uzyskać naprawdę interesujące efekty wizualne. Jako narzędzia możesz też użyć trybów mieszania, takich jak izolowanie obrazu z białym tłem, aby jej tło wyglądało na przezroczyste.

Za pomocą CSS możesz wykorzystać większość trybów mieszania dostępnych w narzędziu do projektowania, za pomocą mix-blend-mode lub background-blend-mode. mix-blend-mode stosuje mieszanie do całego elementu a background-blend-mode stosuje przenikanie do tła elementu.

Używasz formatu background-blend-mode, gdy element ma wiele tła i chcesz, żeby się ze sobą zlewały.

mix-blend-mode wpływa na cały element, łącznie z pseudoelementami. Jednym z przypadków użycia jest początkowy przykład obrazu dwutonowego, który dzięki pseudoelementom ma warstwy kolorów.

Tryby mieszania dzielą się na 2 kategorie: rozdzielane i nierozdzielalne. Tryb mieszania rozłącznego uwzględnia każdy składnik koloru, takich jak RGB. W trybie mieszania nierozłącznego wszystkie składniki koloru są traktowane jednakowo.

Zgodność z przeglądarką

mix-blend-mode

background-blend-mode

Tryby mieszania możliwych do rozdzielenia

Normalnie

Jest to domyślny tryb mieszania i nie ma wpływu na sposób mieszania elementu z innymi.

Pomnóż

Tryb mieszania multiply działa jak ułożenie kilku przezroczystości na siebie. Białe piksele będą przezroczyste, a czarne piksele będą czarne. Każdy element znajdujący się między nimi mnoży wartość jasności (jasności). Oznacza to, że światła stają się znacznie jaśniejsze i ciemniejsze, ciemniejszy – najczęściej przyciemniony wynik.

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

Ekran

Użycie funkcji screen powoduje mnożenie wartości light, czyli odwrotność do wartości multiply, i zwykle przynoszą jaśniejsze rezultaty.

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

Nakładka

Ten tryb mieszania (overlay) łączy funkcje multiply i screen. Ciemne kolory podstawowe stają się ciemniejsze, a jasne podstawowe stają się jaśniejsze. Zmiana nie ma wpływu na kolory ze średniej półki, np. szarość 50%.

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

Ustaw ciemniejszy

Tryb mieszania darken porównuje jasność obrazu źródłowego i obrazu tła z jasnością ciemnego koloru i wybiera najciemniejszą z tych opcji. Jest to możliwe dzięki porównywaniu wartości w formacie RGB, a nie jasności (jak robi to multiply i screen), dla każdego kanału kolorów. W przypadku opcji darken i lighten nowe wartości kolorów są często tworzone na podstawie procesu porównywania.

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

Lighten

Użycie funkcji lighten działa dokładnie odwrotnie do metody darken.

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

Rozjaśnianie mieszaniem

Jeśli używasz color-dodge, rozjaśnia kolor tła, aby odzwierciedlał kolor źródłowy. Ten tryb nie ma żadnych efektów w czystych czarnych kolorach.

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

Wypalone kolory

Tryb mieszania color-burn jest bardzo podobny do trybu mieszania multiply. ale zwiększa kontrast, co skutkuje bardziej nasyconymi tonami pośrednimi i ograniczeniem prześwietleń.

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

Ostre światło

hard-light zapewnia żywy kontrast. Ten tryb mieszania wyświetla albo mnoży wartości jasności. Jeśli wartość piksela jest jaśniejsza niż 50% szarości, obraz jest rozjaśniony. jakby ją filtrowano. Jeśli jest ciemniejszy, jest mnożony.

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

Miękkie światło

Tryb mieszania soft-light to mniej surowa wersja overlay. Działa to dokładnie tak samo, ale z mniejszym kontrastem.

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

Różnica

Aby pokazać, jak działa difference, dobrze jest zrozumieć działanie negatywu. W trybie mieszania difference stosowana jest różnica wartości każdego piksela, odwracanie kolorów światła. Jeśli wartości kolorów są identyczne, kolor zmienia kolor na czarny. Różnice w wartościach zostaną odwrócone.

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

Wykluczenia

Korzystanie z adresu exclusion jest bardzo podobne do użycia z difference, ale zamiast czarnego dla identycznych pikseli, przywróci szarość o 50%, co da efekt cichszy i mniejszy kontrast.

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

Nierozdzielalne tryby mieszania

Przykładami trybów mieszania są komponenty HSL color. Każda z nich pobiera określoną wartość komponentu z aktywnej warstwy i łączy ją z innymi wartościami składowymi.

Odcień

Tryb mieszania hue przyjmuje odcień koloru źródłowego. i stosuje go do nasycenia i jasności koloru tła.

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

Nasycenie

Działa tak jak hue, ale użycie saturation jako trybu mieszania powoduje nasycenie 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ść koloru tła.

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

Jasność

luminosity to odwrotność color. Tworzy kolor z jasnością koloru źródłowego oraz odcieniem i nasyceniem koloru tła.

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

Właściwość isolation

Jeśli ustawisz isolation właściwość o wartości isolate, stworzy to nowy kontekst grupowania, dzięki czemu nie zlewa się z warstwą tła. Jak wiesz z modułu z-index, podczas tworzenia nowego kontekstu układania staje się ona warstwą podstawową. Oznacza to, że tryby mieszania na poziomie nadrzędnym nie będą już stosowane. ale elementy wewnątrz elementu z ustawionym isolation: isolate mogą nadal mieszać się.

Pamiętaj, że to nie działa w przypadku background-blend-mode ponieważ właściwość „tle” jest już izolowana.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o trybach mieszania