Hlavní navigace

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

Martin Smola 31. 10. 2012

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:

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é.

Našli jste v článku chybu?

31. 10. 2012 9:32

Jakub C. Gelion (neregistrovaný)

I já se připojuji k poděkování autorovi a doufám, že mentorské komentáře ho neodradí od další publikační činnosti.

Sám se občas zabývám tvorbou webů ale zamrzl jsem někde kolem roku 2008 a další novinky se ke mne dostávají právě pomocí takovýchto článků, které mi připomenou, že věci které jsem byl zkyklý dělat několik let jednou metodou se už můžou řešit mnohem elegantněji.

To, že se v článku najdou nepřesnosti mi zas tak nevadí, správné znění deklarací a další použití si jsem schopen najít na…

31. 10. 2012 9:09

tdvorak (neregistrovaný)

Narozdíl od ostatních považuju článek za užitečný a autorovi děkuji. Každá osvěta mezi webaři je dobrá. Hlavně se nenechat odradit od psaní jedovatými komentáři. Nedávno jsem řešil pomalé načítání webu, který dělal jeden webdesigner. Vždycky byl nejchytřejší a o webu věděl všechno nejlíp. A na webu z konce roku 2011 použil pro pozadí obrázek 1600x1600px - 120KB jen proto, aby docílil sotva viditelného radiálního přechodu.

Vitalia.cz: Nestlé vyvinula nový typ „netloustnoucího“ cukru

Nestlé vyvinula nový typ „netloustnoucího“ cukru

Podnikatel.cz: Komunikace firem na Facebooku? Otřes!

Komunikace firem na Facebooku? Otřes!

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Měšec.cz: Finančním poradcům hrozí vracení provizí

Finančním poradcům hrozí vracení provizí

Podnikatel.cz: 1. den EET? Problémy s pokladnami

1. den EET? Problémy s pokladnami

Root.cz: Vypadl Google a rozbilo se toho hodně

Vypadl Google a rozbilo se toho hodně

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

DigiZone.cz: Sat novinky: slovenská TV8 HD i ruský NTV Mir

Sat novinky: slovenská TV8 HD i ruský NTV Mir

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Podnikatel.cz: Víme první výsledky doby odezvy #EET

Víme první výsledky doby odezvy #EET

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Podnikatel.cz: Na poslední chvíli šokuje výjimkami v EET

Na poslední chvíli šokuje výjimkami v EET

Podnikatel.cz: Babiš: E-shopy z EET možná vyjmeme

Babiš: E-shopy z EET možná vyjmeme

DigiZone.cz: Rádio Šlágr má licenci pro digi vysílání

Rádio Šlágr má licenci pro digi vysílání

Lupa.cz: Seznam mění vedení. Pavel Zima v čele končí

Seznam mění vedení. Pavel Zima v čele končí

DigiZone.cz: ČT má dalšího zástupce v EBU

ČT má dalšího zástupce v EBU