Jak korzystać z trybów mieszania CSS

Tryby mieszania CSS to prosty sposób na dodawanie efektów graficznych bezpośrednio w przeglądarce.

Z tego powodu tradycyjny sposób edycji, a następnie zapisywania zdjęć z oprogramowania do edycji obrazu nie zawsze jest konieczny. Jako projektanci spędziliśmy niezliczone godziny, dodając efekty do obrazów za pomocą narzędzi takich jak Adobe Photoshop. Przechodząc przez ten samouczek, zauważysz, że wiele opcji przypomina te w Photoshopie, ale teraz można je wykonać z wydajnością stylów CSS.

Czy tryby mieszania przeglądarki całkowicie wyeliminują potrzebę korzystania z oprogramowania do edycji obrazu? Nie do końca, a już na pewno nie do końca. Ale obsługa CSS i przeglądarek przeszła długą drogę w zakresie obsługi nowych sposobów edycji obrazów. Przycinanie i maskowanie CSS i SVG, tryby mieszania, transformacja 3D i inne z pewnością mogą zmniejszyć zależność od oprogramowania do edycji obrazów. Ponieważ przeglądarki stają się coraz bardziej wyrafinowane, zobaczymy o wiele większy potencjał i (miejmy nadzieję) będziemy spędzać mniej czasu w Photoshopie.

Tryby mieszania CSS i tryby mieszania CSS Mix

W tym samouczku omówimy tryby mieszania CSS i sposób ich użycia. Na początek jest kilka różnych opcji, o których powinieneś wiedzieć. Jeden to efekt z background-blend-mode , a drugi z mix-blend-mode .

Korzystając z background-blend-mode property , możesz łączyć warstwy tła (obraz lub kolor) elementu. Tryby mieszania są zdefiniowane jako wartość i określają sposób mieszania lub mieszania kolorów obrazu tła z kolorem lub innymi obrazami tła znajdującymi się za nim.

Co się stanie, jeśli chcesz zrobić trochę mieszania, ale nie z elementami tła? Elementy można łączyć ze sobą za pomocą właściwości mix-blend-mode . Ta właściwość opisuje, jak powinno wyglądać mieszanie między ułożonymi w stos elementami HTML. Elementy na nakładających się warstwach zmieszają się z elementami pod nimi. Ta właściwość będzie miała wpływ na wszelkie obrazy, tekst, obramowania lub nagłówki.

Przykład mnożenia Adobe Photoshop

Przyjrzenie się tradycyjnemu sposobowi wyświetlania trybów mieszania w edytorze obrazów daje nam wyobrażenie o tym, co możemy osiągnąć za pomocą trybów mieszania CSS. Poniższe zdjęcie zostało utworzone w programie Adobe Photoshop. Obraz znajduje się na własnej warstwie tła z czerwoną warstwą powyżej. Wybrano tryb mieszania dla czerwonej warstwy, czyli „Pomnóż”. Jak widać, jest czerwona nakładka. Aby osiągnąć ten efekt, Adobe Photoshop pobiera kolory z warstwy, do której zastosowano „Pomnóż”, mnoży przez kolory na warstwach poniżej, a następnie dzieli je przez 255, aby pokazać wynik.

Ten sam efekt można osiągnąć dzięki CSS, który pozwala na szybsze dostosowywanie i łatwą aktualizację.

Podstawowy przykład trybu mieszania CSS

Prostym przykładem, aby zobaczyć, jak działają tryby mieszania, jest mieszanie obrazu z background-color . Najpierw należy zadeklarować ścieżkę URL do obrazu, a następnie określić kolor. Po podjęciu decyzji należy wybrać tryb mieszania. Wybrano opcję Pomnóż, aby pokazać, jak ten tryb mieszania wpływa na wygląd background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Tryb mieszania to sposób obliczania ostatecznej wartości koloru piksela w przypadku nakładania się warstw. Każdy tryb mieszania przyjmuje wartość koloru pierwszego planu i tła (kolor górny i dolny), oblicza ich wartość i zwraca wartość koloru. Ostatnia, widoczna warstwa jest wynikiem obliczenia trybu mieszania dla każdego nakładającego się piksela między mieszanymi warstwami.

Mnożenie to bardzo popularny tryb mieszania, ale dostępne są również inne opcje trybu mieszania: ekran, nakładka, przyciemnianie, rozjaśnianie, unikanie kolorów, wypalanie kolorów, twarde światło, miękkie światło, różnica, wykluczenie, odcień, nasycenie, kolor i jasność. Jeśli określono „normalny”, spowoduje to zresetowanie rzeczy. Zamiast przechodzić przez szczegóły każdego trybu mieszania jeden po drugim, eksperymentowanie z nimi jest najlepszym sposobem na określenie ostatecznego wyniku.

Tryb Mieszania Tła Z Dwoma Obrazami

Zamiast nakładania kolorów na obraz, nałożenie dwóch obrazów na siebie może dać całkiem fajny efekt. To tak proste, jak dodanie dwóch obrazów tła w deklaracji CSS. Następnym wyborem jest posiadanie koloru tła (lub nie). Jeśli nie chcesz koloru tła, możesz go usunąć, a obrazy będą się mieszać w zależności od wybranego trybu mieszania.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Gradient w trybach mieszania tła

Zamiast używać tylko jednego koloru, gradienty mogą również dawać unikalne efekty.

 .gradient-na-obrazie {
 tło:
 liniowy gradient (fioletowy 0%, czerwony 80%),
 linear-gradient(do prawej, fioletowy 0%, żółty 100%), url("image.jpg");
 tryb mieszania tła: ekran, różnica, rozjaśnienie;
 } 

Zauważysz również, że ten przykład ma wiele trybów mieszania tła. Jeśli jeden tryb mieszania nie wystarczy, można użyć wielu.

Przykłady pracy można znaleźć w tym Codepen.

Przykłady mieszania trybu mieszania

Do tej pory skupialiśmy się na tle. Co zrobić, jeśli inne elementy na stronie chcą skorzystać z trybów mieszania? To żaden problem i dostępne są te same typy trybów mieszania.

Rzeczy wyglądają tak samo z background-blend-modes z wyjątkiem początkowego, dziedziczenia i nieustawienia.

• Początkowe: domyślne ustawienie właściwości, które nie ustawia trybu mieszania.
• Dziedzicz: Dziedziczy tryb mieszania z elementu nadrzędnego.
• Nieustawione: Usuwa tryb mieszania z elementu.

Podstawowy przykład mieszanego trybu mieszania z izolacją

Podczas pracy w trybie mix-blend-mode natkniesz się na potrzebę izolacji. Po pierwsze, ważne jest, aby wiedzieć, że „układanie” jest możliwe, co jest cenne podczas pracy z wieloma warstwami. Pomyśl o stosie pudeł. Każde pudełko jest oddzielone od grupy. Wewnątrz każdego pudełka może znajdować się wiele warstw przedmiotów. Ten sposób myślenia pomoże w ustaleniu, co należy odizolować.

Mieszanie tekstu i obrazu w trybie Mix-blend-mode

W tym przykładzie div z klasą img-wrap zawiera obraz. Obraz ma mix-blend-mode mnożenia. Zasadniczo obraz wydaje się wpadać w tło.

Aby temu zapobiec, div img-wrap (zawierający również tekst nagłówka) powinien być nowym zestawem ułożonych w stos treści, aby był oddzielony od tła elementu body. Odbywa się to za pomocą właściwości izolacji. Domyślną wartością jest auto, więc isolation: isolate; trzeba będzie dodać.

Aby to przetestować, skomentuj właściwość izolacji elementu div klasą .img-wrap i sprawdź wynik.

Oto kod HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Oto kod CSS. Zwróć szczególną uwagę na isolate na .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

Działający przykład można znaleźć na Codepen.

Tekst Wycięty W Trybie Mieszania Mieszania

Niektóre interesujące efekty tekstowe można tworzyć za pomocą trybów mieszania mieszania. Istnieje prosty sposób na wycięcie tekstu. Tło jest ukryte przez wypełnienie elementu h1 .

Oto kod HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

Ta zawierająca <div> jest wypełniona obrazem tła lasu.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

Nagłówek w nim jest stylizowany z opcjonalnym kolorem tła. Nagłówek ma efekt przezroczystości z półprzezroczystym obrazem tła za pomocą trybu mix-blend-mode multi:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

Działający przykład można znaleźć na Codepen.

Mix-blend-mode i SVG

Pliki SVG są bardzo popularne w Internecie, a tryby mieszania CSS również dobrze z nimi współpracują. Kształty można łatwo ukierunkować, aby nadać im pożądany tryb mieszania.

Izolat był również kluczowy w tym przykładzie. Bez wyizolowania kręgów szare tło przeszkadzałoby.

Oto kod do utworzenia grupy kręgów:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Oto style CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Ten przykład można znaleźć na Codepen.

Obsługa przeglądarki w trybie mieszania tła i mieszania mieszania

Obsługa przeglądarki jest całkiem dobra, ale nie do końca spójna w przypadku trybu mieszania tła. Zanim zaczniesz projekt wykorzystujący tę funkcję, sprawdź Czy mogę używać. Obecnie Edge i Safari nie są obsługiwane. Aby poradzić sobie z ograniczoną obsługą i w zależności od tego, jakie przeglądarki muszą być obsługiwane, dobrym rozwiązaniem może być zapytanie o funkcje CSS. Jeśli nie, myślenie o „mieszanych” obrazach jako ulepszeniu (a nie wymogu) może być najlepszym rozwiązaniem.

Obsługa przeglądarki jest nieco lepsza w trybie mix-blend-mode. Dobrze jest mieć świadomość częściowego wsparcia. Na przykład Safari nie obsługuje barwy, nasycenia, koloru ani jasności.

Najlepszym sposobem, aby naprawdę dowiedzieć się, co można zaprojektować za pomocą trybów mieszania, jest eksperymentowanie. Pokazane tutaj przykłady tylko zarysowały powierzchnię. To niesamowite, jakie grafiki można tworzyć za pomocą trybów mieszania. To wielki krok naprzód w stosunku do tego, co można zrobić w sieci.

Napędzaj swobodę tworzenia dzięki silnikowi WP

WP Engine zapewnia swobodę tworzenia w WordPress. Produkty firmy, najszybsze spośród wszystkich dostawców WordPress, zasilają 1,5 miliona cyfrowych doświadczeń. Więcej z 200 000 najlepszych witryn na świecie używa WP Engine do zasilania swoich cyfrowych doświadczeń niż ktokolwiek inny w WordPress. Znajdź nasze więcej na wpengine.com lub porozmawiaj z przedstawicielem już dziś!