Jak korzystać z trybów mieszania CSS

Tryby mieszania CSS to łatwy 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 na dodawaniu efektów do obrazów za pomocą narzędzi takich jak Adobe Photoshop. Podczas przechodzenia przez ten samouczek zauważysz, że wiele opcji przypomina te z Photoshopa, ale można je teraz zrobić z wydajnością stylizacji CSS.

Czy tryby mieszania w przeglądarce 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ę we wspieraniu nowych sposobów edycji obrazów. Obcinanie i maskowanie CSS i SVG, tryby mieszania, transformacja 3D i wiele więcej mogą z pewnością zmniejszyć zależność, jaką mamy od oprogramowania do edycji obrazów. W miarę jak 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

Ten samouczek omówi tryby mieszania CSS i sposób ich użycia. Na początek istnieje 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 właściwości background-blend-mode property , możesz mieszać warstwy tła (obraz lub kolor) elementu. Tryby mieszania są definiowane 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ć mieszanie, 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 przebiegać mieszanie między ułożonymi w stos elementami HTML. Elementy na nakładających się warstwach zleją się z tymi pod nimi. Ta właściwość będzie miała wpływ na wszelkie obrazy, tekst, obramowania lub nagłówki.

Adobe Photoshop mnoży przykład

Przyjrzenie się tradycyjnemu sposobowi pokazywania 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 stworzone w Adobe Photoshop. Obraz znajduje się na własnej warstwie tła z czerwoną warstwą powyżej. Wybrano tryb mieszania dla warstwy czerwonej, 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 szybszą personalizację i łatwą aktualizację.

Podstawowy przykład trybu mieszania CSS

Prostym przykładem pokazującym, jak działają tryby mieszania, jest mieszanie obrazu z a 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 tutaj pomnożenie, aby pokazać, jak ten tryb mieszania wpływa na wygląd obrazu background-image .

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

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

Mnożenie jest bardzo popularnym trybem mieszania, ale dostępne są również inne opcje trybu mieszania: ekran, nakładka, przyciemnienie, rozjaśnienie, unikanie koloru, wypalanie koloru, mocne ś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 ustalenie ostatecznego wyniku.

Tryb mieszania tła z dwoma obrazami

Zamiast nakładać kolorową nakładkę na obraz, nakładanie dwóch obrazów razem może mieć 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ą mieszać się ze sobą 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 w tle

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

.gradient-on-image {
 background:
 linear-gradient(purple 0%, red 80%),
 linear-gradient(to right, purple 0%, yellow 100%),   url("image.jpg");
 background-blend-mode: screen, difference, lighten;
 }

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 trybów mieszania

Do tego momentu skupiono się na tle. Co zrobić, jeśli inne elementy na stronie będą chciały skorzystać z trybów mieszania? To żaden problem i dostępne są te same typy trybów mieszania.

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

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

Podstawowy przykład mieszanego trybu mieszania z izolacją

Podczas pracy z mix-blend-mode natkniesz się na potrzebę wykonania pewnej izolacji. Po pierwsze, ważne jest, aby wiedzieć, że „układanie” jest możliwe, co jest przydatne podczas pracy z wieloma warstwami. Pomyśl o stosie pudełek. 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 wyizolować.

Mieszanie tekstu i obrazu w trybie mix-blend

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

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

Aby to przetestować, skomentuj właściwość izolacji w 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 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 mix-blend

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

Oto kod HTML:

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

Ten zawierający <div> jest wypełniony 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 przy użyciu mix-blend-mode mnożenia:

.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.

Tryb mieszania i SVG

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

Izolacja była kluczowa również 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 dla trybu mieszania w tle i trybu mieszania w tle

Obsługa przeglądarki jest całkiem dobra, ale nie do końca spójna dla trybu mieszania w tle. Przed rozpoczęciem projektowania wykorzystującego tę funkcję, sprawdź Czy mogę użyć. Obecnie Edge i Safari nie mają wsparcia. 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 funkcję CSS. Jeśli nie, najlepszym rozwiązaniem może być myślenie o „mieszanych” obrazach jako ulepszeniu (nie wymaganiu).

Obsługa przeglądarki jest nieco lepsza w trybie mieszania. Dobrze jest mieć świadomość częściowego wsparcia. Na przykład Safari nie obsługuje odcieni, 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 właśnie zarysowały powierzchnię. To niesamowite, jaki rodzaj grafiki można stworzyć za pomocą trybów mieszania. To wielki krok naprzód, jeśli chodzi o to, co można zrobić w sieci.

Dalej: Najlepsze wtyczki WordPress dla projektantów stron internetowych

Uzyskaj więcej wyników, których szukasz, ze swoich wtyczek! Zbadaliśmy, przetestowaliśmy i skompilowaliśmy najlepsze wtyczki WordPress „chleb i masło”, których powinien używać każdy projektant stron internetowych! Niezależnie od tego, czy szukasz nowej wtyczki antyspamowej, kreatora stron czy SEO, ta obszerna lista zawiera po trochu każdej wtyczki dla Twoich potrzeb WordPress. Uwielbiane przez nas, naszych klientów i klientów naszych klientów, to 20 najlepszych wtyczek dla projektantów WordPress. Przeczytaj całą listę tutaj!

Ten samouczek został pierwotnie opublikowany 1-23-2017. Ostatnia aktualizacja 2-16-2019.