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