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
Które z tych opcji to tryby mieszania CSS?
Jeśli chcesz mieszać różne kolory na różne sposoby, jakiego typu trybu mieszania będziesz potrzebować?