Co pomyślicie, jeśli wam powiem, że stylowanie tła strony za pomocą gradientów to super pomysł? Pewnie części z was w pierwszej chwili stanęły przed oczami kolorowe obrazki rodem sprzed 10 lat, Word Art…? Efektowne przejścia między kolorami wywołujące co najmniej oczopląs. I odruch wymiotny. Jednak po kilku sekundach nostalgicznych wspomnień dochodzimy do wniosku, że owszem – gradienty to dobry pomysł na tło.
Do sedna. Takie standardowe gradienty przenikających się kolorów rzeczywiście powracają do łask. Jednak ja ani trochę nie chcę tu o nich pisać. Chcę zwrócić uwagę na gradienty z bardzo konkretnymi, zerojedynkowymi przejściami między kolorami. Ajjj, czuję się, jakbym niewidomemu opisywała kolory. Patrzcie na kawałek screena strony stripe.com:
Już rozumiecie, o co mi chodzi?
Mam dla was fiddla, w którym znajdziecie kilka przykładów podobnych gradientów.
Takie fajerwerki! Przy użyciu starego, dobrego CSSa. Jak często zapominamy o nim podczas rozwiązywania naszych frontowych problemów! Odpowiedzi szukamy daleko w javascriptach, tymczasem przez myśl nam nie przechodzi zwykły CSS. A przecież dobrze wiemy, że często najprostsze rozwiązania są najlepsze.
Wracając do gradientów. Musicie przyznać, że powyższe konstrukcje mają szansę zrobić stronę. To minimalistyczne, a jednocześnie silne akcenty. Żyć, kodować, nie umierać! Jednak trzeba umieć je ugryźć z dobrej strony. Podobny efekt można byłoby uzyskać np. za pomocą SVG. Jednak ja tam wolę dłubać w CSS niż SVG. Jakoś lepiej na mnie patrzy.
Inspiracją do stworzenia tego wpisu był rozdział z książki „CSS Secrets – Better Solutions to Everyday Web Design Problems” Lea Verou. Polecam do niej zaglądnąć, jeśli temat gradientów was szczególnie zainteresował.
