Gradient

Další možností pro obarvení pozadí prvku je gradient. Formálně se jedná o variantu obrázku na pozadí, takže se zadává pomocí vlastnosti background-image. V definici gradientu zadáte jednotlivé barvy, které pak více či méně plynule přecházejí jedna v druhou. Na výběr máte tři odrůdy: lineární, kruhový a kónický.

Lineární gradient

V lineárním gradientu barvy přecházejí od jednoho okraje prvku ke druhému. Definuje se pomocí funkce linear-gradient(). Jeho nejjednodušší podoba je následující:

Uvedete počáteční a koncovou barvu, oddělené čárkou. Počáteční barva (zde zelená) bude nahoře, koncová (žlutá) dole a barvy mezi nimi budou plynule přecházet mezi nimi.

Chcete-li změnit směr přechodu, uveďte jako první parametr úhel, o který se má otočit. Zde gradient otočíme o 90 stupňů:

Barev samozřejmě může být libovolné množství:

Lze řídit, jakou část jednotlivé barvy zaberou. Implicitně je první barva umístěna na začátku, poslední na konci a mezilehlé barvy jsou v pravidelných rozestupech mezi nimi. To změníte, když za barvou uvedete mezerou oddělenou vzdálenost, ve které má mít gradient tuto barvu.

Řekněme, že bych rád v prvním gradientu přidal více žluté barvy. Proto za ni přidám mezerou oddělenou hodnotu 70%, která určuje, že už v 70 % vzdálenosti má být pozadí žluté:

Pokud posunu i zelenou, zkrátí se úsek, ve kterém barvy přecházejí jedna v druhou:

V extrémním případě lze uvést u dvou po sobě jdoucích barev stejnou hodnotu a vytvořit mezi nimi ostrý přechod:

Zopakováním stejné barvy v různých vzdálenostech vytvoříte jednobarevný pás. Například by se tímto způsobem dala posílit žlutá v našem tříbarevném gradientu:

Vzdálenost lze zadat i absolutně, v pixelech či jakýchkoli jiných jednotkách:

V gradientu se vlastně míchají barvy a stejně jako u míchání barev si můžete poručit, v jakém barevném prostoru má probíhat:

Kruhový gradient

Vytváří se pomocí radial-gradient(), barevné přechody jsou v něm uspořádány do kruhu jako na terči. 0% zde představuje střed kruhu, 100% okraj prvku.

Jak vidíte, trochu jsem kecal, protože výchozím tvarem kruhového gradientu je ve skutečnosti elipsa, která respektuje poměr stran prvku, jehož pozadí tvoří. Chcete-li opravdu kruh, poručte si jej klíčovým slovem circle na začátku hodnoty:

Existuje i klíčové slovo ellipse, ale je celkem zbytečné, protože se jedná o výchozí hodnotu. Kouzelným slůvkem at nastavíte, kde má být střed:

Dají se také určit rozměry, tedy v jaké vzdálenosti od středu má být 100%. Můžete používat běžné jednotky, procenta (ale jen pro elipsu, velikost kruhu se v procentech zadat nedá) i klíčová slova closest-side (nejbližší hrana prvku), farthest-side (nejvzdálenější hrana), closest-corner (nejbližší roh), farthest-corner (nejvzdálenější roh). Určujete-li zároveň střed, musí být velikost před ním:

Kónický gradient

Tato varianta gradientu, kterou vytvoříte pomocí conic-gradient(), je také kruhová, ale barevný přechod neprobíhá od středu k okraji, ale kolem dokola. Jako by byl na povrchu kuželu, na který se díváte shora:

Nejlépe samozřejmě vypadá, když se na konci vrátíte k počáteční barvě, takže není viditelná žádná ostrá hrana a barvy plynule přecházejí jedna do druhé:

Stejně jako u kruhového lze pomocí at předepsat střed:

Nemá-li gradient začínat na linii kolmo vzhůru, přidejte za začátek from následované úhlem, od kterého gradient začíná:

Úhly lze používat i pro pozice jednotlivých barev. Má-li být vpravo červená, lze ji zapsat jako red 25% nebo red 90deg.

Sečteno a podtrženo

Gradienty jsou dost silné. Krátkým kódem v CSS lze dosáhnout zajímavých efektů, zejména když jich navrstvíte několik přes sebe:

Zatím jsme všude předpokládali, že plocha pokrytá gradientem odpovídá ploše prvku, jehož pozadí definujeme. Tak to ale nemusí být. Jeho rozměry lze upravit standardní vlastností background-size a v kombinaci s opakováním lze dosahovat zajímavých výsledků:

V CSS3 Patterns Gallery najdete řadu působivých příkladů, které využívají tuto techniku.

Podrobnosti o gradientech najdete na stránkách MDN.