Od provozovatele projektu Rychlost.CZ

Barvy - Různé

vydáno: 10.03.2016, seriál: Různé | komentářů: 0

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.

Ukázka:

Výsledek:

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)

Barvy dle jmen

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.

Ukázka:

Barvy dle jména

CSS
.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:

Red (červená)
Green (zelená)
Blue (modrá)

Barvy dle RGB

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)

Ukázka:

Barva dle RGB

CSS
.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:

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)

Průhlednost RGBA

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)

Ukázka:

Barva s průhledností

CSS
.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:

aplha 0.2
aplha 0.4
aplha 0.6
aplha 0.8
aplha 1.0

Podpora webových prohlížečů

Firefoxano
Internet Explorerversion: 9
Google Chromeano
Safariversion: 3
Operaversion: 10

Barvy dle HEX

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)

Ukázka:

Barvy dle HEX

CSS
.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;
}
HTML
<div class="box" id="red">#ff0000</div>
<div class="box" id="green">#00ff00</div>
<div class="box" id="blue">#0000ff</div>
Použité tagy: <div>

Výsledek:

#ff0000
#00ff00
#0000ff

Barvy dle jména

Nejjednodušší varianta definice barvy. Zapisuje se pomocí anglických názvů barev. Je podporováno 140 základních odstínů.

Barvy dle RGB

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. 

Barvy dle RGBA

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

Barvy dle HEX

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 "#".

Seriál Různé

Seznam všech článků seriálu: