WEBnSTUDY.com
CSS

CSS boje

Boja se obično zadaje kroz kombinaciju tri kolorne komponente - crvene, zelene i plave (takozvani RGB). Može se zadati na više načina:

Primeri zadavanja boje

U sledećem primeru možete videti različite načine za zadavanje boja.


  <!doctype html>
  <html>
    <head>
      <title>Primer HTML stranice</title>
      <meta charset="utf-8" />
		
      <style>
        h1 {
          color: maroon;
          background-color: BurlyWood;
        }
        .boja {
          color: #f8f0c3;
          background-color: #326;
        }
        p {
          color: rgb(60,150,100);
          background-color: rgba(255,255,190, 0.8);
        }
      </style>
		
    </head>
    <body>
      <h1>Naslov</h1>
      <div class="boja">
        Blok teksta
        <p>Pasus unutar bloka.</p>
      </div>
      <p>Pasus van bloka.</p>
    </body>
  </html>
	

Rezultat bi izgledao ovako:

Naslov

Blok teksta

Pasus unutar bloka.

Blok teksta

Pasus van bloka.

Za naslov je definisan stil sa bojama koje su zadate putem naziva boja.

Div blok ima definisan stil klase boja, sa bojom teksta podešenom putem šestocifrenog heksadekadnog koda - #f8f0c3. Ovaj kod u stvari predstavlja RGB kombinaciju: crvena f8, zelena f0 i plava c3, što preračunato u dekadne brojeve predstavlja vrednosti 248, 240 i 195.

Boja pozadine podešena je putem trocifrenog koda #326. Ovaj kod se tumači kao da smo naveli šestocifreni kod #332266. Pazite, ovo su i dalje heksadekadne vrednosti, što znači da su nivoi za crvenu, zelenu i plavu - 51, 34 i 102.

Za pasus se boje zadaju kolornim funkcijama. Boja teksta je zadata preko funkcije rgb(), unutar koje se zadaju tri vrednosti za crvenu 60, zelenu 150 i plavu 100. Boja pozadine se zadaje funkcijom rgba(), u kojoj su postavljene vrednosti za crvenu i zelenu na 255 a za plavu 190. Ovde je postavljena i vrednost alfa kanala (providnost boje) na 0.8, što odgovara "jačini" od 80% (znači da je boja providna 20%).

Zbog toga je i primetan efekat mešanja boje pasusa sa bojom zadatom u pozadini bloka klase boja. Pasus koji se nalazi van bloka, zbog toga ima drugačiju nijansu pozadine (ona se "meša" sa belom pozadinom stranice).

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.