Toto je 2. díl seriálu Různé, pokud se dostatečně neorientujete, zkuste první díl.
Toto je 2. díl seriálu Různé, pokud se dostatečně neorientujete, zkuste první díl.
Barevné odstíny vznikají pomocí tří základních barev. Červené, zelené a modré. Jejich kombinací pak vznikají další barvy. V dnešním článku se podíváme, jak se barvy využívají v HTML a CSS. Představíme si tři základní možnosti zápisu barev. Barvy zapisujeme podle jmén, podle intenzity RGB a také pomocí hexadecimální soustavy. Ukážeme si také, jak lehce přidat barvě průhlednost.
Výsledek:
Nejjednodušší variantou definování barev v HTML a CSS je použití názvů. Celkově je podporováno 140 základních odstínů. Názvy barev se uvádějí v angličtině a není rozlišována velikost písma. Red je stejná barva jako red.
Barvy dle jména
.box{width: 150px;height: 50px;text-align: center;font-weight: 900;color: #fff;}#red{background-color: red;}#green{background-color: green;}#blue{background-color: blue;}
Výsledek:
Další možností je použití číselných hodnot RGB. Každá barva se udává pomocí tří číselných parametrů v rozsahu od 0 do 255. Tyto hodnoty udávají intenzitu základních barev, červené (Red), zelené (Green), modré (Blue). Jejich vzájemnou kombinací pak vzniknout různé barvy.
Zápis - rgb(red, green, blue)
Příklady
Černá barva: rgb(0 ,0 , 0)
Bílá barva: rgb(255, 255, 255)
Barva dle RGB
.box{width: 150px;height: 50px;text-align: center;font-weight: 900;color: #fff;}#red{background-color: rgb(255,0,0);}#green{background-color: rgb(0,255,0);}#blue{background-color: rgb(0,0,255);}
Výsledek:
V nové CSS3 specifikaci byla přidána podpora průhlednosti. Standartní zápis RGB se rozšiřuje o hodnotu průhlednosti. Ta je udávána v rozmezí od 0 do 1, kdy 1 je plná neprůhlednost.
Zápis: rgba(red, green, blue, opacity)
Příklad
Červená barva s poloviční průhledností: rgba(255, 0, 0, 0.5)
Červená barva s 20% průhledností: rgba(255, 0, 0, 0.8)
Barva s průhledností
.box{width: 150px;height: 50px;text-align: center;font-weight: 900;color: #fff;}#red-02{background-color: rgba(255,0,0,0.2);}#red-04{background-color: rgba(255,0,0,0.4);}#red-06{background-color: rgba(255,0,0,0.6);}#red-08{background-color: rgba(255,0,0,0.8);}#red-1{background-color: rgba(255,0,0,1.0);}
Výsledek:
RGB zápis barev lze převést také do hexadecimální soustavy, kdy každou barvu reprezentují hodnoty od 00 do FF. Místo označení rgb se používá znak mřížky #. U barev, které mají v hodnotách jednotlivých intenzit stejný dvouznak, lze zápis zkrátit uvedením pouze jednoho znaku viz příklad.
Zápis: #RRGGBB
Příklady
Černá barva: #000000 (zkrácený zápis #000)
Bílá barva: #ffffff (zkrácený zápis #fff)
Barvy dle HEX
.box{width: 150px;height: 50px;text-align: center;font-weight: 900;color: #fff;}#red{background-color: #ff0000;}#green{background-color: #00ff00;}#blue{background-color: #0000ff;}
<div class="box" id="red">#ff0000</div><div class="box" id="green">#00ff00</div><div class="box" id="blue">#0000ff</div>
Výsledek:
Nejjednodušší varianta definice barvy. Zapisuje se pomocí anglických názvů barev. Je podporováno 140 základních odstínů.
Odstín barvy je udán pomocí tří hodnot intenzity červené, zelené a modré barvy v rozsahu od 0 do 255. Jejich kombinací vznikají další barvy.
Od specifikace CCS3 byla přidána podpora průhlednosti. Klasický zápis se rozšíří o hodnotu průhlednosti v rozmezí od 0 do1 (1 = plná neprůhlednost).
RGB zápis lze převést do hexadecimální soustavy, kdy je intenzita barev vyjádřena hodnotami od 00 do FF. Před zápis se vkládá znak mřížky "#".
