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;
}
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;
}
Pokud definujeme barvu rámečku, můžeme použít zápis tohoto typu:
#id_elementu {
border: 1px solid red;
}
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);
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é.
ČLÁNKY DO MAILU