Grafiki przed wrzuceniem na stronę zwykle edytowałem kolorystycznie np. w GIMP’ie, aby pasowały do koncepcji wizualnej całej witryny, ale chyba niedługo się to zmieni, bo dowiedziałem się o sztuczkach koloryzacji w CSS. Jakie to sztuczki?

Można je nazwać po prostu filtrami przerabiającymi grafikę na ich wersję np. dwutonową czy czarno-białą. Można również stworzyć grafiki z gradientem odcieni, możliwości są bardzo duże.

Choć muszę podkreślić, że do zwykłych, małych korekt koloru czy samej grafiki raczej nie nada ta funkcja, gdyż mechanizm działa na zasadzie edytowalnej maski kolorystycznej na obraz – tyle.

Zróbmy to!

Jak to wygląda w praktyce? Aby uzyskać efekt jak na powyższej grafice wystarczy w pliku naszego stylu CSS dopisać:

[css]
.blue{
background-color: blue;
}
.blue img{
mix-blend-mode: lighten;
-webkit-filter: grayscale(100%) contrast(.8);
filter: grayscale(100%) contrast(.8);
}
[/css]

oraz nasz obrazek na stronie zamknąć w przestrzeni o zdefiniowanej wcześniej w CSS klasie „blue” np.:

[html]
<div class="blue">
<img src="https://static.pexels.com/photos/27411/pexels-photo-27411.jpg"/>
</div>
[/html]

Więc co jest czym w tym kodzie? W pliku CSS „background-color” odnosi się do koloru naszego filtra, kolor wybrałem „#00f” czyli niebieski.

Niżej “mix-blend-mode”, czyli główna właściwość określa tryb mieszania się kolorów i odcieni naszego elementu, nie będę wszystkich rozpisywał , ale trybów łącznie jest 10 – jeśli mam dobre dane 😉. Mnie najbardziej zaciekawiły trzy, a mianowicie „multiply”, „darken” i „lighten”, tego ostatniego właśnie użyłem, aby w połączeniu kolorów grafiki i filtra, odcieniem finalnym był ten, który był jaśniejszy. Reszta odpowiednio ciemniejsze lub mieszane odcienie.

Właściwości „filter” i „-webkit-filter” są de facto takie same funkcje, po prostu działają na innych przeglądarkach. Na Firefoxie działa „filter”, a „-webkit-filter” na Safari, Chrome, Operze czy innych przeglądarkach działających na silniku webkit. W tym wypadku użyłem filtrów, aby pozbyć się kolorów i uzyskać odpowiedni kontrast.
I wszystko powinno działać!

Chcesz więcej?

Możliwości jest bardzo dużo i mam wrażenie, że nie opiszę tego bardzo dobrze we wszystkich aspektach, więc odsyłam do projektu na CodePen, gdzie można zobaczyć i przetestować w akcji większość możliwości właściwości „mix-blend-mode”.

Spotify Colorizer Demo

Autor: Michał Kotfas