Podcast o CSS – 024: mieszanie trybów
Duotone to popularna w fotografii metoda kolorowania, która sprawia, że zdjęcie składa się tylko z dwóch kontrastujących kolorów – jednego do najjaśniejszych miejsc, a drugiego do słabego oświetlenia. Jak to zrobić za pomocą arkusza CSS?
Korzystając z 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 często stosuje się w narzędziach do projektowania, takich jak Photoshop, do tworzenia efektu kompozycji poprzez mieszanie kolorów z co najmniej 2 warstw. Zmieniając sposób mieszania kolorów, można uzyskać naprawdę interesujące efekty wizualne. Możesz też użyć trybów mieszania, np. odizolować zdjęcie z białym tłem, tak aby miało przezroczyste tło.
W przypadku CSS możesz używać większości trybów mieszania dostępnych w narzędziu do projektowania za pomocą właściwości mix-blend-mode lub background-blend-mode.
Pole mix-blend-mode stosuje przenikanie do całego elementu, a background-blend-mode do jego tła.
Stosujesz background-blend-mode, gdy masz w elemencie wiele tła i chcesz, aby się ze sobą stykały.
mix-blend-mode wpływa na cały element, w tym na jego pseudoelementy.
Jednym z przykładów zastosowania jest początkowy przykład obrazu Duotone, w którym za pomocą pseudoelementów do elementu są nałożone warstwy kolorów.
Tryby mieszania dzielą się na 2 kategorie: oddzielone i nieoddzielne. W oddzielnym trybie mieszania każdy komponent koloru, taki jak RGB, jest rozpatrywany z osobna. W trybie mieszania, którego nie można rozdzielać, wszystkie składniki koloru są traktowane jednakowo.
Zgodność z przeglądarką
mix-blend-mode
background-blend-mode
Rozdzielne tryby mieszania
Normalnie
Jest to domyślny tryb mieszania, który nie zmienia sposobu mieszania elementu z innymi.
Pomnóż
Tryb mieszania multiply przypomina nakładanie na siebie kilku przezroczystości.
Białe piksele będą przezroczyste,
a czarne – czarne.
Każdy element pomiędzy nimi mnoży wartości jasności (jasności).
Oznacza to, że światła są znacznie jaśniejsze i ciemniejsze,
a często też ciemniejsze.
.my-element {
mix-blend-mode: multiply;
}
Ekran
Użycie właściwości screen powoduje mnożenie wartości światła – jest to odwrotny efekt do multiply i najczęściej daje jaśniejszy wynik.
.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 – jaśniejsze.
Nie ma to wpływu na kolory ze średniej półki, takie jak szary 50%.
.my-element {
mix-blend-mode: overlay;
}
Ustaw ciemniejszy
Tryb mieszania darken porównuje ciemny kolor obrazu źródłowego i obrazu tła i wybiera najciemniejszą z dwóch.
Jest to możliwe dzięki porównaniu wartości RGB zamiast jasności (tak jak zrobiłby to multiply i screen) dla każdego kanału koloru.
W przypadku metod darken i lighten nowe wartości kolorów często są tworzone na podstawie tego procesu porównywania.
.my-element {
mix-blend-mode: darken;
}
Rozjaśnienie
Użycie właściwości lighten działa w przeciwieństwie do darken.
.my-element {
mix-blend-mode: lighten;
}
Rozjaśnianie mieszaniem kolorów
Jeśli użyjesz trybu color-dodge, rozjaśni on kolor tła, aby odzwierciedlić kolor źródła.
Kolory czystej czerni nie dają żadnego efektu w tym trybie.
.my-element {
mix-blend-mode: color-dodge;
}
Wypalenie kolorów
Tryb mieszania color-burn jest bardzo podobny do trybu mieszania multiply, ale zwiększa kontrast, co skutkuje bardziej nasyconymi tonami pośrednimi i mniejszą liczbą podświetleń.
.my-element {
mix-blend-mode: color-burn;
}
Ostre światło
Użycie hard-light pozwala uzyskać żywy kontrast.
Ten tryb mieszania wyświetla lub mnoży wartości jasności.
Jeśli wartość w pikselach jest jaśniejsza niż 50% szarości, obraz jest rozjaśniony, tak jakby był chroniony. Jeśli jest ciemniejszy, mnożymy go.
.my-element {
mix-blend-mode: hard-light;
}
Miękkie światło
Tryb mieszania soft-light to mniej surowa wersja overlay.
Działa tak samo z mniejszym kontrastem.
.my-element {
mix-blend-mode: soft-light;
}
Różnica
Dobry sposób na zrozumienie działania difference przypomina działanie negatywu.
Tryb mieszania difference uwzględnia różnicę wartości poszczególnych pikseli i odwraca 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
Metoda exclusion jest bardzo podobna do metody difference, ale w przypadku identycznych pikseli zamiast koloru czarnego zostanie zwrócona 50% szara, co skutkuje słabym kontrastem.
.my-element {
mix-blend-mode: exclusion;
}
Nierozdzielne tryby mieszania
Te tryby mieszania przypominają komponenty color HSL. Każda z nich pobiera konkretną wartość komponentu z aktywnej warstwy i łączy ją z innymi wartościami komponentu.
Barwa
Tryb mieszania hue uwzględnia barwę koloru źródłowego i stosuje ją do nasycenia i jasności koloru tła.
.my-element {
mix-blend-mode: hue;
}
Nasycenie
Ta metoda działa podobnie jak hue, ale użycie trybu mieszania saturation powoduje zastosowanie nasycenia koloru źródła 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ść
Funkcja luminosity jest odwrotnością funkcji color.
Tworzy kolor z jasnością koloru źródłowego oraz barwą i nasyceniem koloru tła.
.my-element {
mix-blend-mode: luminosity;
}
Właściwość isolation
Jeśli ustawisz właściwość isolation na wartość isolate, utworzy ona nowy kontekst stosu, który zapobiegnie mieszaniu się właściwości z warstwą tła.
Jak dowiedzieliśmy się z modułu z-index, gdy utworzysz nowy kontekst stosu, ta warstwa staje się warstwą podstawową.
Oznacza to, że tryby mieszania na poziomie nadrzędnym nie będą już stosowane, ale elementy wewnątrz elementu z zestawem isolation: isolate mogą nadal się łączyć.
Pamiętaj, że ta właściwość nie działa w przypadku właściwości background-blend-mode, ponieważ jest ona już izolowana.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat trybów mieszania
Które z tych trybów to tryby mieszania CSS?
Który sposób mieszania kolorów pozwoli Ci mieszać kolory na różne sposoby?