U ovoj lekciji ćemo se baviti bojama na webu i njihovim specifičnostima. Videćemo kako kroz CSS možemo definisati boju na više načina i kontrolisati. Bavićemo se i terminologijom u vezi boja.
U ovoj lekciji ćemo se baviti bojama na webu i njihovim specifičnostima. Videćemo kako kroz CSS možemo definisati boju na više načina i kontrolisati. Bavićemo se i terminologijom u vezi boja.
Vrednosti boja možemo definisati na više načina. Možemo koristiti RGB ili HEX sisteme, kao i imenovanje boja (na engleskom). Pored toga, u CSS verziji 3 možemo koristiti i HSLA, kao i nadogradnju RGB sistema.
RGB[1]
Monitori računara i drugih uređaja koji prikazuju naše sajtove su sastavljeni od sitnih, skoro nevidljivih golim okom, kvadrata koje nazivamo pikselima. Kombinacijom miliona piksela na monitoru dobijamo sliku. Svaki piksel je obojen jednom bojom, a ta boja zavisi od tri komponente, tačnije od crvene (Red), zelen (Green) i plave (Blue) boje. Od početnih slova naziva tih boja, nastaje i skraćenica RGB. Ukoliko Vas interesuje više o sistemima boja, a specifično o RGB modelu, pogledajte http://en.wikipedia.org/wiki/Rgb. Ostali sistemi, pogotovo HEX, su u osnovi vrlo slični.
Prikaz RGB modela
Shodno malopre navedenom, praktično svaku boju možemo prikazati kombinacijom crvene, zelene i plave. I drugi alati, ne nužno vezani za web, već za digitalne medije uopšte, prikazuju boje u ovom sistemu. Na slici ispod je prikazan color picker alat iz Adobe Photoshop CS5 aplikacije. Primetićete tri polja za RGB (označeni su crvenom isprekidanom linijom).
Color picker u Photoshopu
Ovde na slici je izabrana crvena boja i njene vrednosti u RGB sistemu su (255,0,0).
Da bismo bilo koju boju prikazali na netu, pišemo vrednosti njenih komponenti. Vrednosti idu od 0 (nema boje) do 255 (maksimalno zasićena boja). U primeru crvene, crvena komponenta je na maksimumu, dok su zelena i plava na minimumu (nema ih). Zato je oznaka crvene (255,0,0). Oznaka čiste zelene boje je (0,255,0) zato što je zelena komponenta na maksimumu.
Bela boja se označava sa (255,255,255) i tada su sve tri komponente na maksimumu, dok je crna (0,0,0) jer nema boja, „ugašene su“. Sve kombinacije između daju ostale boje.
Ukoliko ovo deluje komplikovano, ne brinite. Lako možete naći RGB vrednost boje tako što ćete otvoriti Photoshop ili sličan grafički program (videli smo primer iznad) ili možete izguglati rgb web colorsili slične ključne rečii dobiti puno stranica sa izlistanim bojama. Ili obrnuto, ako dobijete rgb boju, a ne znate koja je, jednostavno iskopirajte u Google. Takođe, u prilogu ove jedinice je dat dokument sa tabelom u kojoj je prikazano dosta boja sa njihovim RGB i HEX vrednostima. Pored toga, možete koristiti i razne online alate, poput vrlo zanimljivog: http://colorschemedesigner.com/
HEX[2]
Heksadecimalni sistem označavanja boja koristi šestocifrene heksadecimalne oznake. U osnovi je vrlo sličan RGB sistemu, samo što se komponente (crvena, zelena i plava) drugačije predstavljaju. Naime, u RGB sistemu, svaka komponenta ide od 0 do 255, dok u HEX sistemu, svaka komponenta ide od 00 do FF. Prisetimo iz matematike heskadecimalnog sistema, u kome cifre ne idu od 0 do 9, već 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Kao primer, pogledajmo poređenje nekih decimalnih i heksadecimalnih brojeva:
| Decimal | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| Hex | A | B | C | D | E | F | 10 | 11 |
Zanimljivo je da isto označeni brojevi u dec i hex sistemu, na primer 10 i 11, nisu isti brojevi.
Pošto se svaka komponenta piše sa dva hex karaktera, puna boja (sastavljena od tri komponente) se piše pomoću šest hex karaktera kojima prethodi znak #.
Na primer, crvena boja u hex sistemu je #FF0000. To je zato što je, kao i kod RGB, crvena na maksimumu, a ostale su isključene. Jedna naradžasta je npr. #FF9900. Kod nje je opet crvena na maksimumu (FF), zelena je na određenom nivou (99), dok je plava isključena (00).
Crvena hex boja – #FF0000
Kao i kod RGB sistema, nema potrebe da pamtimo oznake boja i da računamo ručno. Možemo naći oznake u raznim tabelama, u Photoshopu (na gornjoj slici color pickera označeno sa plavom isprekidanom linijom) i tako dalje.
Još jedna napomena oko hex sistema. Može se desiti da umesto npr #FF9900 primetite #F90 oznaku boje. Ovo nije greška, već je kraći način pisanja hex boja. On se može primeniti samo pod uslovom da su oba karaktera ista kod svake od komponenti, a nezavisno od druge dve komponente. U ovom primeru je to slučaj, jer je svaka komponenta sastavljena od istih karaktera # FF 99 00, i tako dobijamo #F90. Uvek možemo koristiti i pun naziv sa šest karaktera.
Imena boja
Browseri prepoznaju 147 imenovanih boja. Možemo za crvenu pisati jednostavno red, za plavu blue ili neke malo manje poznate kao što su Chocolate, DeepPink i tako dalje. Ovaj sistem je prilično nepraktičan i uglavnom se izbegava. Sve dostupne boje možete naći na ovoj adresi: http://www.w3schools.com/cssref/css_colornames.asp.
HSL[3]
Ovaj način zapisivanja boja je novina u CSS3 i još uvek nije zaživeo u potpunosti jer ga stariji browseri ne prepoznaju (Internet Explorer tek od verzije 9 ima podršku za HSL).
I ovaj sistem je sastavljen od tri komponente, stim da su one drugačije od RGB i HEX varijanti. U HSL sistemu srećemo Hue (Nijansa), Saturation (Zasićenost) i Lightness (Svetlina, osvetljaj).
- Nijansa se određuje uglom u paleti boja, i kreće se od 0 do 360.
- Zasićenost je vrednost od 0% do 100%. 100% je potpuna zasićenost, dok je 0% nijansa sive.
- Svetlina je udeo bele ili crne u boji (svetlo). Vrednost ide od 0% do 100%. 50% je normalna osvetljenost, dok je 0% crno, a 100% belo.
Alpha[4]
U CSS3 možemo takođe koristiti HSLA ali i prošireni RGB sistem pod nazivom RGBA.
Primećujemo da smo u oba sistema dodali slovo A, koje je skraćenica od Alpha. Alpha bi mogli prevesti kao transparentnost, mada to nije najadekvatniji termin. Ono što nas zanima je to da pomoću tog četvrtog parametra, možemo boji dodeliti providnost. Pomenuti alpha parametar je isti i za RGBA i HSLA.
Alpha vrednost se određuje u rasponu 0 do 1. Na primer, 0.3 predstavlja 30% providnosti, dok 0.75 predstavlja 75% providnosti.
Pošto je i ovo novina koju donosi CSS3 treba je koristiti oprezno i sa namerom.
Za sada smo videli koji sistemi postoje. Sada ćemo videti kako se oni primenjuju. Dve su najvažnije primene boja na webu, a to su boja teksta i boja pozadine. Pored toga, boju možemo primeniti na ivice (border), na ćelije i ostale delove tabela, senke koje bacaju elementi (u CSS3) i tako dalje.
Boja teksta
Boju teksta definišemo tako što okružujućem elementu, kroz CSS opis, definišemo svojstvo color, dok je vrednost samo . Na primer, ukoliko postavimo
p {
color:#0000FF; /* plava boja */
}
Ceo tekst u paragrafu (ako negde nije drugačije naznačeno) će postati plav. Iako bi možda pretpostavili da se color svojstvo odnosi na boju celog elementa ili neki drugi aspekt, to nije slučaj. Color svojstvo se odnosi samo na boju teksta.
Samu boju možemo definisati pomoću ranije pomenutih sistema. Pogledajmo ovaj primer:
h1 {
color:rgb(175,50,175); /* jedna ljubičasta boja */
}
h2 {
color:#0000FF; /* plava boja */
}
h3{
color:Yellow; /* žuta boja */
}
h4 {
color:hsl(20,100%,50%); /* narandžasta boja*/
}
Svaki od ovih CSS opisa za naslove koristi drugačiji sistem za određivanje boje. Može se čak naći i u istom opisu više različitih sistema na istom svojstvu, npr:
p {
color:rgb(255,0,0);
color:blue;
color:#00FF00;
}
Ali ovako napisan opis neće imati smisla, jer se uvek primenjuje poslednje svojstvo. U ovom slučaju, prva dva se zanemaruju.
Što se tiče alpha vrednosti, nju dodajemo na RGB i HSL ukoliko želimo i kôd može izgledati ovako:
div {
color: rgba(255,0,255,0.5);
}
div {
color: hsla(80,50%,60%,0.8);
}
Primećujete da smo samo dodali četvrtu komponentu i to kao vrednost između 0 i 1.
Boja pozadine
Boju pozadine nekog elementa definišemo vrlo slično boji teksta. Razlikuje se, naravno, svojstvo, koje za boju pozadine glasi background-color(ili skraćeno background, videćemo detalje u nastavku). Sama vrednost se postavlja isto jer je reč o boji.
body {
background-color:#FEFEFE;
}
Ovim primerom smo postavili CSS opis za body element (celu stranu) i definisali vrlo svetlu sivu boju kao boju pozadine za cel ustranu (body).
Kada se koristi background-color, a kada samo background?
U CSS-u, u osnovi, postoje svojstva background-color i background-image. Oba se mogu koristiti na istom elementu, prva definiše boju pozadine, a druga pozadinu sliku. Prvo se prikazuje boja pozadine, a onda preko nje slika. Oba svojstva nisu obavezna i možemo postavili jedno od ta dva, nijedno ili oba.
Da bismo skratili pisanje, možemo postaviti samo backgroundsvojstvo i preko njega definisati boju pozadine. Postavljanje pozadinske slike ćemo obraditi u jedinici u kojoj se govori o slikama i tada će biti više reči o ovom svojstvu.
[1] Red, Green, Blue – dominantni sistem prikaza boja na današnjim računarima i digitalnim uređajima. Takođe, i sistem označavanja boja na webu.
[2] Način zapisivanja boja primarno na webu. Veoma sličan RGB, ali uz drugačiji način zapisivanja.
[3] skraćeno od Hue (nijansa), Saturation (zasićenost) i Lightness (osvetljenost). Sistem označavanja boja koji je uveden u web dizajn sa pojavom CSS3 standarda.
[4] Oznaka za transparentnost u određenim oblastima, npr. u Adobe Flash Professional alatu ili u CSS jeziku.