mix-blend-mode do mieszania warstw
Nauczy się Pan/Pani mieszać kolory elementów z treścią znajdującą się pod nimi, używając w CSS trybów mieszania znanych z Photoshopa.
mix-blend-mode do mieszania warstw to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest mix-blend-mode?
mix-blend-mode określa sposób mieszania pikseli elementu z pikselami elementów znajdujących się pod nim — podobnie jak tryby mieszania warstw w Photoshopie. Wpływa na cały element, włącznie z jego tłem.
Normalny (domyślny)
normal to wartość domyślna — mieszanie nie jest stosowane. Element znajdujący się wyżej zasłania wszystko, co znajduje się pod nim.
multiply
multiply przyciemnia obraz, mnożąc wartości pikseli. Biały kolor staje się przezroczysty, a czarny pozostaje czarny. Doskonale nadaje się do umieszczania obrazów w ciemnych tonacjach na kolorowych tłach.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
screen jest odwrotnością multiply — rozjaśnia obraz. Czarny kolor staje się przezroczysty, a biały pozostaje biały. Dobrze sprawdza się w przypadku efektów świetlnych i poświat.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
overlay łączy działanie multiply i screen. Ciemne obszary stają się ciemniejsze, a jasne — jaśniejsze. Zwiększa kontrast, zachowując tony średnie.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
difference odejmuje od siebie kolory. Identyczne kolory dają czerń, a przeciwne — biel. Tworzy psychodeliczne efekty o wysokim kontraście.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
Hard Light i Soft Light
hard-light stosuje multiply lub screen w zależności od koloru źródłowego. soft-light jest łagodniejszą wersją, która w mniejszym stopniu zwiększa kontrast.
Tryby mieszania kolorów
Te tryby mieszają tylko wybrane właściwości kolorów:
hue— pobiera odcień z górnej warstwy, a nasycenie i jasność z dolnejsaturation— pobiera nasycenie z górnej warstwycolor— pobiera odcień i nasycenie z górnej warstwy, a jasność z dolnejluminosity— pobiera jasność z górnej warstwy
Tryb color dla duotonu
Obrazy duotone można tworzyć, nakładając kolorowy element z właściwością mix-blend-mode: color:
<div class="duotone"></div>
Odwrócony efekt tekstu
Tekst, który wygląda na odwrócony na dowolnym tle:
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
Konteksty stosu i tryb mieszania
mix-blend-mode miesza elementy znajdujące się w tym samym kontekście stosu. Właściwość isolation: isolate na elemencie nadrzędnym tworzy nowy kontekst stosu, uniemożliwiając trybom mieszania wpływanie na elementy poza odizolowaną grupą.
Szybkie sprawdzenie
Który tryb mieszania sprawia, że białe części elementu stają się przezroczyste, a kolorowe i ciemne obszary zostają zachowane — podobnie jak przezroczysty papier?
Podsumowanie
mix-blend-mode miesza piksele elementu z zawartością znajdującą się pod nim. Najważniejsze tryby to: multiply (przyciemnia, biały kolor → przezroczysty), screen (rozjaśnia, czarny kolor → przezroczysty), overlay (zwiększa kontrast), difference (odejmuje kolory) i color (zmienia kolory obrazów). Aby ograniczyć zakres mieszania, należy użyć isolation: isolate na elemencie nadrzędnym.
Często zadawane pytania
Czy lekcja „mix-blend-mode do mieszania warstw” jest bezpłatna?
Tak — pełny tekst „mix-blend-mode do mieszania warstw” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „mix-blend-mode do mieszania warstw”?
Nauczy się Pan/Pani mieszać kolory elementów z treścią znajdującą się pod nimi, używając w CSS trybów mieszania znanych z Photoshopa. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „mix-blend-mode do mieszania warstw”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- filter: blur, brightness, contrast, grayscale
- backdrop-filter dla efektu matowego szkła
- mix-blend-mode do mieszania warstw
- Właściwość isolation