Hlavní navigace

Novinky v CSS3: gradients, barvy a barevné přechody

31. 10. 2012
Doba čtení: 4 minuty

Sdílet

Na webových stránkách lze definovat barvu několika způsoby. Některé zápisy je možné používat již dlouho, některé přibyly až s nástupem a následnou podporou nové specifikace HTML5 a stylovacího jazyka CSS3. V následujících řádkách se pokusím popsat všechny definice barev, které můžeme v současné době použít.

Barvy

Barvy lze v CSS definovat:

  • klíčovým slovem, či slovním spojením
  • hexadecimálním zápisem
  • pomocí rgb nebo rgba
  • pomocí hsl nebo hsla

#id_elementu_s_barevnym_textem {
	color: red; 
}	

Nějaký text, který jsme obarvili.

Vlastností color určujeme barvu textu obsaženého v našem elementu. V našem případě jsme použili definici pomocí klíčového slova red, čímž jsme definovali textu červenou barvu. Standardně je text černý.

Pokud chceme místo textu obarvit samotný element, použijeme vlastnost background-color:


#id_elementu {
	background-color: red; 
}	

Obarvené pozadí elementu.

Pokud definujeme barvu rámečku, můžeme použít zápis tohoto typu:


#id_elementu {
	border: 1px solid red; 
}	

Element s červeným (red), plným (solid) rámečkem tloušťky 1 pixel (1px)

Tímto jsem v rychlosti popsal základní vlastnosti, kterými se jednotlivé barvy definují. Hlavně pro začátečníky... Nyní se podíváme na jednotlivé hodnoty, jimiž lze barvy do těchto vlastností definovat.

Klíčová slova (slovní spojení)

  • color: blue;
  • color: blanchedalmond;

Pomocí klíčových slov lze definovat barvu velice snadno, podle katalogového názvu, který lze najít například na webu W3.org. Tento způsob definice jsem použil v předešlých příkladech. Jde vlastně o anglický název dané barvy. Black, white, yellow, red, blue, green, atd... Dále se ve specifikaci objevila slovní spojení. Jde v podstatě o rozšíření předešlých klíčových slov o další odstíny, které můžeme najít také na webu W3.org.

Hexadeximální zápis

  • color: #0000FF;
  • color: #FFEBCD;

Další možnost, kterou lze definovat barvy, je hexadecimální, šestnáctkový zápis. Jako označení hexadecimálního zápisu se používá prefix #. Následujících šest znaků označuje obsah červené, zelené a modré barvy ve formátu #RRGGBB (Red, Green, Blue). Lze zapisovat i ve tří-znakovém formátu #RGB (např. #999).

RGB, RGBA

  • color: rgb(0,0,255);
  • color: rgb(255,235,205);

S nástupem a podporou CSS3 vznikla možnost definovat barvy decimálním zápisem. Tedy tak, jak to známe z rastrových a vektorových editorů. Číslem s hodnotou mezi 0 a 255 definujeme obsah červené, zelené a modré složky. Lze zapisovat i procentuálně ve formátu rgb(0%, 0%, 100%). Prefixujeme zkratkou rgb a oblými závorkami: rgb().

Metoda zahrnuje i použítí tzv. Alfa kanálu, tedy definici průhlednosti barvy. Tedy pokud místo prefixu rgb použijeme rozšířený rgba(), můžeme zapsat čtvrtou hodnotu, která určuje transparentnost barvy hodnotou 0 až 1. 0 značí zcela průhlednou a 1 naopak neprůhlednou. Při zápisu desetiny používáme desetinou TEČKU.

 

rgba(0,0,255,0.2) => 20% viditelnost

rgba(165,42,42,0.8) => 80% viditelnost

rgba(255,140,0,1) => 100% viditelnost

HSL, HSLA

  • color: hsl(240, 100%, 50%);

Stejně jako rgb přibylo do CSS3 také HSL a HSLA. Fungují prakticky stejně jako RGB a RGBA, jen nezadáváme obsah jednotlivých barevných složek, ale zadáváme barvu odstínem (Hue), sytostí (Saturation) a světlostí (Lightness).

Tímto bych završil rekapitulaci definice barev v CSS. Pomalu se pustíme do, v tomto článku důležitějšího, zápisu gradientů neboli barevných přechodů.

Přechody

S nástupem HTML5 a CSS3 se nám naskytla možnost vytvářet elementy s barevným přechodem, definovaných pomocí CSS namísto obrázků, které byly do této doby k vytvoření přechodu nezbytné

Pro zápis přechodů se nejlépe hodí definovat barvy pomocí RGBA nebo HSLA, jelikož můžeme u každého stupně přechodu definovat i různou transparentnost.

Přechody můžeme dělit na lineární a radiální.

Lineární přechody

  • background: linear-gradient(left, blue, green);
element s přechodem od leva, z modré do zelené

Lineární přechody lze vytvářet jednoduše pomocí vlastnosti linear-gradient(). Do této vlastnosti zapisujeme nejprve směr, odkud přechod bude probíhat, pokud chceme zleva doprava zapíšeme hodnotu left, opačně right. Pokud chceme gradient odshora dolů top a opačně bottom. Pokud chceme přechod diagonálně, určíme roh, ze kterého má začínat, například: right bottom. Přechod bude začínat v pravém dolním rohu. Dále je možné zapsat úhel od nějaké strany, například 30 bottom. Gradient bude začínat dole a bude pootočen o 30°.

Další hodnota je výchozí barva, u které bude přechod začínat. Poslední, třetí hodnota je konečná barva, tedy barva, u které přechod skončí. Pokud chceme více stupňů přechodu, zapíšeme první a každý další oddělujeme čárkou. Za definici barvy v daném stupni, zapíšeme procentuální umístění 0%, 25%, 36% .... 100%.

Pozor, tato vlastnost ještě není podporována bez prefixů, je tedy potřeba ji prefixovat pro každý z prohlížečů.

Pár ukázek:

background: linear-gradient(bottom, rgb(143,18,33) 0%, rgb(207,72,90) 100%);

background: linear-gradient(right bottom, rgb(19,75,143) 49%, rgb(72,207,180) 100%);

background: linear-gradient(right bottom, rgb(196,192,174) 17%, rgb(255,250,79) 22%, rgb(150,150,101) 41%, rgb(255,255,145) 71%, rgb(77,77,15) 90%);

 

Není ani tak nutné psát přechody ručně. Existuje již spousta online generátorů, které generují přímo CSS kód.

 

Radiální přechody

  • background: radial-gradient(75% 19%, ellipse, #ababab, #0000ff 100%)

Radiální, tedy elipsovité nebo kruhové přechody fungují v zásadě podobně jako přechody lineární. Jen je třeba u nich definovat několik jiných hodnot. Nejprve definujeme umístění začátku přechodu (střed) a to pomocí horizontálního a vertikálního procentuálního umístění. Pak typ samotného přechodu, jestli ellipse nebo circle. Nakonec definujeme barevné stupně přechodu od prvního do posledního, nebo jen první a poslední. Opět existuje spousta online generátorů, které umějí velice usnadnit práci a umožňují tak dosáhnout dokonalého výsledku.

Pár ukázek:

root_podpora

background: radial-gradient(50% 50%, ellipse cover, #ff5b42, #88ff38 47%,#999999 100%);

background: radial-gradient(50% 50%, circle cover, #ffffff, #1aff00 100%);

background: radial-gradient(50% 50%, ellipse cover, #ff5b42, #88ff38 47%,#999999 100%);

Na závěr bych dodal k přechodům jen to, že je lepší definovat elementu s přechodem ještě jednu barvu pozadí s nějakou hexadecimální barvou, před definici přechodu. To zajistí, že pokud prohlížeč staršího typu nebude přechody podporovat, sáhne po této barvě a element bude mít místo například modrobílého přechodu modrou barvu. Tudíž nezůstane bílý a narušení designu webu nebude tak výrazné.

Byl pro vás článek přínosný?

Autor článku

Martin Smola je studentem ČVUT, věnuje se programování, web-designu, grafice a psaní článků. Pracuje na vlastním projektu 4dgraph.com, který umožňuje sdílet fotky, grafiku a textury.