Boje na web stranicama

Objavljeno: 09.12.2007. 16:25

U samom početku razvoja weba, izbor boja koje su se koristile na web stranicama bio je poprilično ograničen. Večina računala bila je sposobna prikazati tek 256 boja, iako je bilo i računala koja su mogla prikazati znatno više boja. Vremenom se tehnologija sve više razvijala, da bi nam danas omogučila bogatstvo boja koje možemo prikazati na web stranicama.

Boje se sastoje od tri komponente - crvene, zelene i plave (RGB - red green blue). Kombiniranjem osnovnih komponenti, moguće je dobiti željenu boju. Za definiranje boja možemo koristiti nekoliko različitih načina - u sljedećem primjeru možete vidjeti kako na različite načine definiramo plavu boju (blue u HTML 4.01 standardu).

naziv boje - blue
heksadecimalnim zapisom - #0000FF
rgb zapisom - rgb(0,0,255)
hsl zapisom - hsl(160,240,120)

U (X)HTML-u je moguće koristiti jedino prva dva načina, dok je u CSS-u moguće definirati boje na sva četiri načina. Pojavom XHTML standarda, sadržaj se odvaja od prezentacije i CSS postaje poželjan način za definiranje boja. U XHTML-u se, međutim, i dalje može koristiti atribut color, kao i <font></font> tagovi - samo je potrebno definirati Transitional doctype.

Nazivi boja u (X)HTML standardu

Specifikacija HTML 4.01 standarda definira šesnaest (16) imena boja, koja se mogu koristiti umjesto heksadecimalnog zapisa. Sve ostale boje potrebno je definirati u heksadecimalnom obliku. Po dvije znamenke predstavljaju svaku od tri komponente - crvenu, zelenu i plavu. Raspon boja kreće se od 256 do 16 777 216, što bi u heksadecimalnom sustavu bio raspon od #000000 do #FFFFFF.

U sljedećem primjeru, tekst unutar paragrafa definiran je u heksadecimalnom zapisu.

<font color="#0000FF">Ovaj tekst je plave boje</font>

Budući da je definirana plava boja (blue) po HTML 4.01 standardu, istu stvar smo mogli zapisati u sljedećem obliku, a umjesto plave možete koristiti preostale boje:

<font color="blue">Ovaj tekst je plave boje</font>

Nazivi i upotreba boja u CSS-u

CSS postaje poželjan način za definiranje boja na web stranicama.

Raspon boja do 16 677 216
CSS3 standard definira 140 naziva boja

Evo i nekoliko primjera u kojima možete vidjeti kao se pomoću CSS-a može promijeniti boja (teksta i pozadine) pojedinih elemenata (tagova). Za boju teksta koristi se svojstvo color, a za pozadinu background-color

body {
color: #ff000;
background-color: #ffffff;
}

U gornjem primjeru, boja teksta će biti crvena (#ff000), dok će pozadina biti bijele boje (#ffffff). Upotrijebili smo body selektor, što znači da se to pravilo odnosi na cijelu web stranicu. Ako želimo da primjerice, samo h1 naslov bude plave boje, upotrijebit ćemo h1 selektor:

h1 { color: #0000ff; }

U CSS-u možemo na nekoliko različitih načina definirati boje, pa evo primjer kako bi to izgledalo.

Naziv boje:

h1 { color: blue; }

Heksadecimalni zapis:

h1 { color: #0000ff; }

h1 { color: #00f;    }  /* skraćeni način */

RGB (red, green, blue) zapis:

h1 { color: rgb(0,0,255); }

HSL zapis:

h1 { color: hsl(160,240,120); }

Više u jednom od sljedećih CSS tutoriala - kako promijeniti boju pojedinim dijelovima teksta, naslovima, podnaslovima i sl.

Tablica boja

Za kraj evo nekoliko linkova koji će vaš život učiniti lakšim. Nema potrebe da pamtite nazive boja ;)

Još nema komentara.

Webcoderz