CSS3 - Boja (Color)


Definisanje boja u CSS3

U prethodnom dijelu naučili ste kako definisati boje pomoću ključnih riječi color i RGB notacija. Uz to CSS3 dodaje neke nove funkcionalne notacije za postavljanje vrijednosti boja za elemente koji su rgba(), hsl() i hsla(). U sljedećem dijelu razgovaraćemo o ovim modelima boja jedan po jedan.



RGBA vrijednosti boja

Boje se mogu definisati u RGBA modelu (crveno-zeleno-plavo-alfa) pomoću funkcionalne notacije rgba(). RGBA model boja produžetak je RGB modela boja s alfa kanalom - koji određuje neprozirnost boje. Alfa parametar prihvata vrijednost od 0,0 (potpuno transparentno) do 1,0 (potpuno neprozirno).

h1 {
    color: rgba(0,0,255,0.5);
}
p {
    background-color: rgba(0%,0%,100%,0.3);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS RGBA Vrijednost boje</title>
<style> 
    h1 {
        color: rgba(0,0,255,0.5);
    }
    p {
        background-color: rgba(0%,0%,100%,0.3);
    }
</style>
</head>
<body>
    <h1>Ovo je naslov</h1>
    <p>Ovo je paragraf.</p>
</body>
</html>


Vrijednosti HSL boje

Boje se takođe mogu definisati HSL modelom (hue-saturation-lightness) pomoću funkcionalne notacije hsl(). Nijansa je predstavljena kao ugao (od 0 do 360) kotačića ili kruga u boji (tj. duga predstavljena u krugu). Ovaj ugao je dan kao jedinica manji broj, jer se ugao tako tipično mjeri u stepenima da je jedinica implicitna u CSS-u. Zasićenje i lakoća predstavljeni su u procentima. 100% zasićenost znači punu boju, a 0% je nijansa sive. Dok je 100% svjetlosti bijelo, 0% svjetlosti crno i 50% svjetlosti je normalno. Pogledajte primjer:

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 HSL vrijednost boje</title>
<style>  
    h1 {
        color: hsl(360,70%,60%);
    }
    p {
        background-color: hsl(480,50%,80%);
    }
</style>
</head>
<body>
    <h1>Ovo je naslov</h1>
    <p>Ovo je paragraf.</p>
</body>
</html>


Vrijednosti boje HSLA

Boje se mogu definisati u HSLA modelu (hue-saturation-lightness-alpha) pomoću funkcionalne notacije hsla(). HSLA modeli boja su proširenje HSL modela boja s alfa kanalom - koji određuje neprozirnost boje. Alfa parametar prihvata vrijednost od 0,0 (potpuno transparentno) do 1,0 (potpuno neprozirno).

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS HSLA vrijednost boje</title>
<style>  
    h1 {
        color: hsla(360,80%,50%,0.5);
    }
    p {
        background-color: hsla(480,60%,30%,0.3);
    }
</style>
</head>
<body>
    <h1>Ovo je naslov</h1>
    <p>Ovo je paragraf.</p>
</body>
</html>