Návod na vytvoření barevného přechodu v CSS. Úvod do problematiky, vysvětlení pojmů a vlastností, tipy na pomůcky při generování kódu.
Co rozumíme barevným přechodem
Barevným přechodem je obecně chápána barevná plocha, která se postupně a nenásilně mění z jedné barvy do jiné. Může se jednat jak o přeliv ze světlejšího odstínu do tmavšího, tak do zcela jiné barevné škály. Na webu se daly tyto záležitosti poměrně dlouho řešit pouze přes hotové obrázky, vytvořené v grafickém programu a pak vložené vhodým způsobem do webu. Na tomto řešení samozřejmě není nic špatného. Dnes, když si většina moderních prohlížečů bez větších potíží poradí s novými vlastnostmi CSS3 však není potřeba zatěžovat uživatele potřebou stahovat obrázky a barevný přechod se dá vyřešit přímo v CSS kódu.
Jak ho zapsat
Nejjednodušší je zápis provést přes vlastnost background-image. Tu pak je potřeba definovat vícenásobně – je tomu tak proto, že se nejedná jednoznačně definovanou vlastnost a aby fungovala ve všech prohlížečích, je ji potřeba zapsat tak, aby jí porozuměl každý – jak ty založené na webkitu (Safari, Chrome, Opera), tak Firefox a Internet Explorer.
Ve výsledku pak může zápis vypadat nějak takto:
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
Každý řádek znamená to samé, ale každý z nich je určen pro jiný prohlížeč. Struktura zápisu je následující:
Druh prohlížeče podporující tento zápis
- -ms-linear-gradinent – Internet Explorer
- -moz-linear-gradient – Mozilla Firefox
- -o-linear-gradient – starší prohlížeče Opera
- -webkit-gradient – Chrome, Safari, novější verze Opery
- linear-gradient – zápis podle směrnic W3C
Orientace přechodu
Podle směřování a vlastností podporovaných tím kterým prohlížečem se může jednat o:
-
top left
-
linear, left top, right bottom,
-
to bottom right
- a další.
První barva, ze které se přechází a její kryvost
- například: #FFFFFF 0%
Druhá barva, do které se přechází, a její kryvost
- například: #00A3EF 100%
Pomůcky pro tvorbu
Zápis pozadí je poměrně komplikovaná záležitost a tvořit ho hned v kódovém editoru je jak vidno věc poměrně nesnadná. Naštěstí si toho už pár jedinců a firem všimlo a vytvořili několik pomůcek, ve kterých je barevný přechod v CSS vytvořit i malé dítě. Jedná se o online aplikace, ve kterých nastavíte barvy tak, jak vám vyhovuje, přímo před sebou vidíte jak bude výsledek vypadat. Po dokončení úprav se vygeneruje kód, který stačí zkopírovat na příslušné místo ve vašem CSS zápisu a práce je hotova. Jde například o tyto:
- CSS Gradient Background Maker od Microsoftu
- Gradient Editor od Colorzilly
- GradColor – umí vygenerovat přechod jak v podobě obrázku, tak v podobě CSS3 zápisu