CSS barvy
CSS podporuje více než 140 názvů barev, hodnoty HEX, hodnoty RGB , hodnoty RGBA, hodnoty HSL, hodnoty HSLA a neprůhlednost.
Barvy RGBA
Hodnoty barev RGBA jsou rozšířením hodnot barev RGB o alfa kanál – který určuje krytí pro barvu.
Hodnota barvy RGBA je specifikována pomocí: rgba (červená, zelená, modrá, alfa). Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).
Následující příklad definuje různé barvy RGBA:
Příklad
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Barvy HSL
HSL je zkratka pro Hue, Saturation and Lightness.
Hodnota barvy HSL je specifikována pomocí: hsl (odstín, sytost, světlost).
- Odstín je stupeň na barevném kole (od 0 do 360):
- 0 (nebo 360) je červená
- 120 je zelená
- 240 je modrá
- Sytost je procentuální hodnota: 100 % je plná barva.
- Lehkost je také procentuální; 0 % je tmavá (černá) a 100 % je bílá.
Následující příklad definuje různé barvy HSL:
Příklad
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Barvy HSLA
Barevné hodnoty HSLA jsou rozšířením hodnot barev HSL o alfa kanál – který určuje krytí pro barvu.
Hodnota barvy HSLA je specifikována pomocí: hsla(odstín, sytost, světlost, alfa), kde parametr alpha definuje krytí. Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).
Následující příklad definuje různé barvy HSLA:
Příklad
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Neprůhlednost
Vlastnost CSS opacity
nastavuje neprůhlednost pro celý prvek (barva pozadí i text budou neprůhledné/průhledné).
Hodnota opacity
vlastnosti musí být číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).
Všimněte si, že výše uvedený text bude také průhledný/neprůhledný!
Následující příklad ukazuje různé prvky s neprůhledností:
Příklad
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */