Mieszanie kolorów w CSS. Selektor mix-blend-mode

1. Czym jest Blend-Mode?

Blend mode, znany również jako "tryb mieszania", to technika stosowana w grafice komputerowej i projektowaniu stron internetowych, która umożliwia mieszanie kolorów i efektów warstw w sposób interaktywny. W kontekście CSS, blend mode pozwala na kontrolę sposobu, w jaki elementy strony nakładają się na siebie i mieszają swoje kolory, co otwiera szeroki wachlarz możliwości projektowych.

2. Jak używać Blend-Mode?

Użycie blend mode w CSS jest stosunkowo proste i wymaga jedynie kilku linii kodu, które można dodać do stylów danego elementu lub klasy CSS. Pierwszym krokiem jest upewnienie się, że elementy, których kolory mają być mieszane, posiadają przezroczystość, co oznacza, że mają ustawioną właściwość opacity na wartość mniejszą niż 1. Bez tego blend mode nie będzie miał widocznego efektu.

Następnie, aby zastosować blend mode, należy dodać właściwość CSS mix-blend-mode do elementu lub klasy, którego kolory chcemy mieszania. Wartość tej właściwości określa konkretny tryb mieszania, który ma zostać użyty. Istnieje kilkanaście dostępnych właściwości.

3. Właściwości Blend-Mode

mix-blend-mode przyjmuje kilka różnych wartości.

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

4. Przykładowe zastosowania

Poniżej możecie sprawdzić działanie poszczególnych właściwości selektora blend-mode