CSS - Boje

Postavljanje boje

Svojstvo boje definiše boju teksta-elementa. Na primjer, svojstvo boje određeno u CSS-u definiše zadanu boju teksta za cijelu stranicu. Pogledajmo sljedeći primjer da vidimo kako to funkcioniše: 

body {
    color: #ff5722;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje boje teksta u CSS</title>
<style>    
    body {
        color: #ff5722;
    }
    .text-green {
        color: #008000;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
    <div class="text-green">Volim učiti HTML5 uz IT TUTORIJALE.</div>
</body>
</html>

Definisanje vrijednosti boje

Boje u CSS-u najčešće se navode u sljedećim formatima:

  • Kjučna riječ za boji - poput "red", "green", "blue", "transparent", itd.
  • HEX vrijednost - poput "#ff0000", "#00ff00" itd.
  • RGB vrijednost - poput "rgb(255, 0, 0)"

CSS3 je predstavio nekoliko drugih formata boja kao što su HSL, HSLA i RGBA koji takođe podržavaju alfa transparentnost. O njima ćemo detaljnije saznati u lekciji CSS3 Color. Za sada se držimo osnovnih metoda definisanja vrijednosti boja.


Ključne riječi za boju

CSS definiše nekoliko ključnih riječi za boju koje vam omogućavaju da odredite vrijednosti boje na jednostavan način. Osnovne ključne riječi za boju su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, i yellow. Nazivi boja ne razlikuju velika i mala slova. 

h1 {
    color: red;
}
p {
    color: purple;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Navođenje boje u CSS-u pomoću naziva boja</title>
<style>    
    h1 {
        color: red;
    }
    p {
        color: purple;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Moderni web pretraživači međutim praktično podržavaju mnogo više boja od onih koje su definisane u CSS standardu, ali da biste bili sigurniji, umjesto naziva koristite HEX vrijednost.


HEX vrjednosti boje

Hex (skraćenica za Hexadecimal) daleko je najčešće korišteni način definisanja boje na webu. HEX vrijednosti predstavljaju boje pomoću šesteroznamenkastog koda, kojem prethodi hash znak, poput #rrggbb, u kojem rr, gg i bb predstavljaju crvenu, zelenu i plavu komponentu boje. Vrijednost svake komponente može varirati od 00 (bez boje) i FF (puna boja) u heksadecimalnoj notaciji, ili 0 i 255 u decimalnom ekvivalentnom zapisu. Tako #ffffff predstavlja bijelu boju, a #000000 predstavlja crnu boju. Pogledajmo sljedeći primjer: 

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Navođenje boje u CSS-u koristeći heksadecimalnu notaciju</title>
<style>    
    h1 {
        color: #ffa500;
    }
    p {
        color: #00ff00;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

RGB vrjednosti boje

Boje se mogu definisati u RGB modelu (crvena, zelena i plava) pomoću rgb() funkcionalne notacije. HEX vrijednosti predstavljaju boje pomoću šesteroznamenkastog koda kojem prethodi hash znak, poput #rrggbb, u kojem rr, gg i bb predstavljaju crvenu, zelenu i plavu komponentu boje. Sljedeći primjer navodi istu boju kao u prethodnom primjeru, ali u RGB notaciji. 

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Navošenje boje u CSS-u koristeći RGB vrijednosti</title>
<style>    
    h1 {
        color: rgb(255, 165, 0);
    }
    p {
        color: rgb(0, 255, 0);
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Uticaj svojstva boje na granice i obrise (Borders and Outlines)

Svojstvo boje nije samo za tekstualni sadržaj, već i za sve ono što u prvom planu uzima vrijednost boje. Na primjer, ako vrijednost bordera ili obrisa boje nije izričito definisana za element, može se koristiti vrijednost boje. Pogledajmo primjer: 

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje boje u prvi plan za elemente</title>
<style>
    p.one {
        color: #0000ff;
        border: 2px solid;
    }
    p.two {
        color: #00ff00;
        outline: 2px solid;
    }
</style>
</head>
<body>
    <p class="one">Boja bordera ovog pasusa jednaka je boji teksta elementa.</p>
    <p class="two">Boja obrisa ovog pasusa ista je kao i boja teksta elementa.</p>
</body>
</html>