Poznaj tryby mieszania w CSS3!

[demo url=”http://edu3.home.pl/blog/pliki/cssblend/” files=”http://edu3.home.pl/blog/pliki/cssblend/cssblend.zip”]

Front-endowe technologie webowe rozwijają się w zaskakującym tempie. Każdego dnia widzimy wysyp nowych eksperymentów z HTML5, CSS3 czy JavaScript, a także otrzymujemy całe mnóstwo nowych frameworków.

W dzisiejszym wpisie rzucimy okiem na obiecującą specyfikację, a mianowicie na „Compositing and Blending” rozwijaną głównie przez zespół Web Platform z Adobe.

Tryby mieszania? Gdzieś to już widziałem…

Zapewne tak. Jeśli korzystasz np. z programu Adobe Photoshop, to doskonale znasz tryby mieszania warstw, dzięki którym możemy tworzyć zaskakujące efekty. Jakiś czas temu, możliwości te zawitały do kodu CSS. Wszystko, o czym będziemy mówić, jest póki co eksperymentalne i nie jest w 100% wspierane we wszystkich przeglądarkach internetowych, ale o tym później.

Tryby mieszania w CSS możemy rozdzielić na dwie grupy: tryby mieszania przypisanego tła lub teł oraz ogólnie – tryby mieszania elementów. Przyjrzyjmy się zatem każdej z tych możliwości.

background-blend-mode

Pierwszą z możliwości jest ustawienie trybu mieszania przypisanego do elementu tła lub wielu teł. Wyobraź sobie, że dla elementu div przypisaliśmy czerwony kolor tła, a następnie również tło w formie obrazka

div {
    background-color: #ff0000;
    background-image: url(obrazek.jpg);
}

Możemy teraz zmieszać obrazek z czerwonym tłem w taki sposób:

div {
    background-color: #ff0000;
    background-image: url(obrazek.jpg);
    background-blend-mode: overlay;
}

Użyliśmy w tym momencie trybu overlay (nakładka). Wszystkie tryby, z których możemy skorzystać to:

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• hue
• saturation
• color
• luminosity
• difference
• exclusion

Jeśli do elementu przypiszemy więcej teł w taki sposób:

div {
    background-color: #ff0000;
    background-image: url(obrazek.jpg), url(obrazek2.jpg);
}

to możemy dla każdego z nich z osobna, przypisać inny tryb mieszania wstawiając je po przecinku:

div {
    background-color: #ff0000;
    background-image: url(obrazek.jpg), url(obrazek2.jpg;
    background-blend-mode: overlay, multiply;
}

mix-blend-mode

Drugą ze wspomnianych możliwości ustawiania trybu mieszania jest mix-blend-mode, czyli właściwość, która pozwala na zmieszanie całego elementu z pozostałymi elementami (które są pod spodem).

Tutaj ogranicza nas tylko wyobraźnia, gdyż możemy tworzyć proste efekty typu nałożony na zdjęcie tekst, z trybem mieszania overlay, ale także zdjęcia zmieszane z gradientami, SVG, a nawet odtwarzanym filmem!

Jak zatem użyć wspomnianej, nowej właściwości? Bardzo prosto:

<div>
    <p>Przykładowy tekst</p>
    <img src="obrazek.jpg">
</div>

p {
    mix-blend-mode: overlay;
}

właściwość isolation

Jeśli jednak nie chcemy, aby element z przypisanym trybem mieszania był mieszany z wszystkimi elementami, które znajdują się pod nim, możemy dla jego rodzica (w naszym przypadku element div) ustawić właściwość isolation na wartość isolate (domyślna wartość to auto).

div {
    isolation: isolate;
}

Wówczas stworzymy nowy kontekst i pozwolimy na miesznie elementów w nim wyłącznie.

canvas też tak potrafi – czyli nie tylko CSS górą!

Jeśli korzystałeś z nowego elementu HTML5 canvas, który umożliwia tworzenie grafiki 2D oraz 3D wprost w przeglądarce, to być może wiesz, w jaki sposób używać trybów mieszania (omówiliśmy to w kursie HTML5 i JavaScript – Techniki Zaawansowane).

Wystarczy, że odwołamy się do właściwości globalCompositeOperation kontekstu i przypiszemy jej jedną z wymienionych wyżej 16-stu wartości.

ctx.globalCompositeOperation = "tryb_mieszania";

Wsparcie przeglądarek dla poszczególnych właściwości

Jeśli chodzi o wsparcie przeglądarek dla właściwości background-blend-mode to jest ono całkiem niezłe (tu oraz tu).

W przypadku właściwości mix-blend-mode jest już nieco gorzej, bo w chwili obecnej nie jest ona wspierana w żadnej stabilnej wersji przeglądarki domyślnie. Nie znaczy to natomiast, że nie możemy przetestować jak działa.

Jeśli jesteś jak ja użytkownikiem przeglądarki Google Chrome, to możesz w niej uruchomić eksperymentalne funkcje i móc je testować. Aby to zrobić, wystarczy przejść pod adres chrome://flags, a następnie wyszukać Enable experimental Web Platform features i opcję tą włączyć. Wówczas będziesz mógł przetestować przygotowane przez nas DEMO z właściwości mix-blend-mode. Bez żadnej konfiguracji zadziała to również w Firefox Nightly.

Jak wykryć wsparcie przeglądarki?

Jak zwykle, mamy tutaj wiele możliwości. Możemy to zrobić w CSS, za pomocą dyrektywy @supports lub z poziomu JavaScriptu na kilka sposobów. Ja polecam jeden z najprostszych:

window.getComputedStyle(document.body).backgroundBlendMode !== undefined;

// oraz

window.getComputedStyle(document.body).mixBlendMode !== undefined;

Podsumowanie

Po raz kolejny przyglądamy się tematyce nie w pełni zaimplementowanych jeszcze możliwości CSS3. Po co to robimy? Jak zwykle – abyś już teraz wiedział, z czego na pewno już niedługo będziemy mogli korzystać i powoli snuł własne pomysły kreatywnego wykorzystania tych możliwości!