Mieszanie kolorów w CSS za pomocą blend mode

Co to jest blend-mode?

Blend mode (tryb mieszania) w CSS to właściwość, która umożliwia kontrolowanie sposobu, w jaki elementy HTML na stronie internetowej mieszają się ze sobą, jeśli nachodzą na siebie. Ta właściwość jest często używana do tworzenia efektów graficznych i kompozycyjnych, zwłaszcza w przypadku elementów, które mają przezroczyste tła.

Blend mode w CSS jest często używany w połączeniu z właściwością background-blend-mode lub mix-blend-mode, które umożliwiają odpowiednio kontrolę mieszania się tła elementu z jego zawartością lub mieszania się dwóch elementów, które nachodzą na siebie.

Jak używać blend-mode?

Aby użyć blend-mode, musimy najpierw zastosować go do naszego elementu za pomocą właściwości mix-blend-mode. Na przykład:

div {
    mix-blend-mode: multiply;
}

W tym przypadku użyłem trybu multiply, który mnoży kolory pikseli górnej i dolnej warstwy, co daje ciemniejszy efekt.

Dostępne tryby mieszania

Istnieje wiele dostępnych trybów mieszania w CSS3, każdy z nich daje inny efekt. Oto kilka z nich:

• normal – jest to domyślny tryb, gdzie górna warstwa pokrywa dolną warstwę,
• multiply – kolor pikseli jest mnożony, a wynik jest ciemniejszym kolorem,
• screen – kolor pikseli jest odwracany, mnożony, a następnie ponownie odwracany – wynik jest jaśniejszym kolorem,
• overlay – miesza multiply i screen, czyli dolne warstwy odbijają górną warstwę,
• darken – wybiera ciemniejszy kolor z górnej i dolnej warstwym
• lighten – wybiera jaśniejszy kolor z górnej i dolnej warstwym
• color-dodge – rozjaśnia dolną warstwę w zależności od jasności górnej warstwym
• color-burn – przyciemnia dolną warstwę w zależności od jasności górnej warstwy.

Czy mogę stosować tryby mieszania do tekstu?

Oczywiście! Właściwość mix-blend-mode może być używana nie tylko dla tła elementów, ale również dla tekstu. Oto przykład:

h1 {
    color: white;
    mix-blend-mode: difference;
}

W tym przykładzie tekst w elemencie h1 będzie miał biały kolor, ale dzięki użyciu mix-blend-mode: difference, kolor tekstu będzie się dynamicznie zmieniał w zależności od koloru tła. To oznacza, że jeśli tło jest jasne, tekst stanie się ciemny i na odwrót. To może stworzyć bardzo interesujące efekty wizualne na Twojej stronie. Pamiętaj jednak, że nie wszystkie przeglądarki mogą obsługiwać mix-blend-mode, więc zawsze upewnij się, że Twój design wygląda dobrze również bez tej właściwości.

Blend-mode z gradientami

Blend-mode można zastosować również do gradientów w CSS. Oto przykład, jak to zrobić:

div {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    mix-blend-mode: multiply;
}

W tym przykładzie tworzymy gradient tła dla elementu div, który przechodzi przez wszystkie kolory tęczy od lewej do prawej. Następnie stosujemy mix-blend-mode: multiply, co powoduje, że kolor tła elementu miesza się z kolorem elementu poniżej.

Możesz eksperymentować z różnymi trybami mieszania i kolorami gradientu, aby uzyskać różne efekty. Pamiętaj jednak, że nie wszystkie przeglądarki obsługują mix-blend-mode, więc upewnij się, że Twój design wygląda dobrze również bez tej właściwości.

Wsparcie przeglądarek