{"id":718,"date":"2020-04-23T15:52:24","date_gmt":"2020-04-23T13:52:24","guid":{"rendered":"http:\/\/skolarbbos.net\/?p=718"},"modified":"2020-05-09T01:53:34","modified_gmt":"2020-05-08T23:53:34","slug":"boje-na-webu","status":"publish","type":"post","link":"https:\/\/skolarbbos.net\/?p=718","title":{"rendered":"Boje na webu"},"content":{"rendered":"

U ovoj lekciji \u0107emo se baviti bojama na webu i njihovim specifi\u010dnostima. Vide\u0107emo kako kroz CSS mo\u017eemo definisati boju na vi\u0161e na\u010dina i kontrolisati. Bavi\u0107emo se i terminologijom u vezi boja.<\/p>\n

U ovoj lekciji \u0107emo se baviti bojama na webu i njihovim specifi\u010dnostima. Vide\u0107emo kako kroz CSS mo\u017eemo definisati boju na vi\u0161e na\u010dina i kontrolisati. Bavi\u0107emo se i terminologijom u vezi boja.<\/p>\n

<\/a>Na\u010dini definisanja boja<\/strong><\/p>\n

Vrednosti boja mo\u017eemo definisati na vi\u0161e na\u010dina. Mo\u017eemo koristiti RGB<\/em> ili HEX<\/em> sisteme, kao i imenovanje boja (na engleskom). Pored toga, u CSS verziji 3 mo\u017eemo koristiti i HSLA, kao i nadogradnju RGB sistema.<\/p>\n

RGB[1]<\/strong><\/a><\/strong><\/p>\n

Monitori ra\u010dunara i drugih ure\u0111aja koji prikazuju na\u0161e 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\u010dnije od crvene (Red), zelen (Green) i plave (Blue) boje. Od po\u010detnih slova naziva tih boja, nastaje i skra\u0107enica RGB. Ukoliko Vas interesuje vi\u0161e o sistemima boja, a specifi\u010dno o RGB modelu, pogledajte http:\/\/en.wikipedia.org\/wiki\/Rgb<\/a>. Ostali sistemi, pogotovo HEX, su u osnovi vrlo sli\u010dni.<\/p>\n

\u00a0\"boje181\"<\/em><\/p>\n

Prikaz RGB modela<\/em><\/p>\n

Shodno malopre navedenom, prakti\u010dno svaku boju mo\u017eemo prikazati kombinacijom crvene, zelene i plave. I drugi alati, ne nu\u017eno vezani za web, ve\u0107 za digitalne medije uop\u0161te, prikazuju boje u ovom sistemu. Na slici ispod je prikazan color picker<\/em> alat iz Adobe Photoshop CS5 aplikacije. Primeti\u0107ete tri polja za RGB (ozna\u010deni su crvenom isprekidanom linijom).<\/p>\n

\u00a0\"boje182\"<\/em><\/p>\n

Color picker u Photoshopu<\/em><\/p>\n

Ovde na slici je izabrana crvena boja i njene vrednosti u RGB sistemu su (255,0,0).<\/p>\n

Da bismo bilo koju boju prikazali na netu, pi\u0161emo vrednosti njenih komponenti. Vrednosti idu od 0 (nema boje) do 255 (maksimalno zasi\u0107ena 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 \u010diste zelene boje je (0,255,0) zato \u0161to je zelena komponenta na maksimumu.<\/p>\n

Bela boja se ozna\u010dava sa (255,255,255) i tada su sve tri komponente na maksimumu, dok je crna (0,0,0) jer nema boja, \u201euga\u0161ene su\u201c. Sve kombinacije izme\u0111u daju ostale boje.<\/p>\n

Ukoliko ovo deluje komplikovano, ne brinite. Lako mo\u017eete na\u0107i RGB vrednost boje tako \u0161to \u0107ete otvoriti Photoshop ili sli\u010dan grafi\u010dki program (videli smo primer iznad) ili mo\u017eete izguglati rgb web colorsili sli\u010dne klju\u010dne re\u010dii dobiti puno stranica sa izlistanim bojama. Ili obrnuto, ako dobijete rgb boju, a ne znate koja je, jednostavno iskopirajte u Google. Tako\u0111e, u prilogu ove jedinice je dat dokument sa tabelom u kojoj je prikazano dosta boja sa njihovim RGB i HEX vrednostima. Pored toga, mo\u017eete koristiti i razne online alate, poput vrlo zanimljivog: http:\/\/colorschemedesigner.com\/<\/a><\/p>\n

HEX[2]<\/strong><\/a><\/strong><\/p>\n

Heksadecimalni sistem ozna\u010davanja boja koristi \u0161estocifrene heksadecimalne oznake. U osnovi je vrlo sli\u010dan RGB sistemu, samo \u0161to se komponente (crvena, zelena i plava) druga\u010dije 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\u0107 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Kao primer, pogledajmo pore\u0111enje nekih decimalnih i heksadecimalnih brojeva:<\/p>\n\n\n\n\n
Decimal<\/td>\n10<\/td>\n11<\/td>\n12<\/td>\n13<\/td>\n14<\/td>\n15<\/td>\n16<\/td>\n17<\/td>\n<\/tr>\n
Hex<\/td>\nA<\/td>\nB<\/td>\nC<\/td>\nD<\/td>\nE<\/td>\nF<\/td>\n10<\/td>\n11<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Zanimljivo je da isto ozna\u010deni brojevi u dec i hex sistemu, na primer 10 i 11, nisu isti brojevi.<\/p>\n

Po\u0161to se svaka komponenta pi\u0161e sa dva hex karaktera, puna boja (sastavljena od tri komponente) se pi\u0161e pomo\u0107u \u0161est hex karaktera kojima prethodi znak #.<\/p>\n

Na primer, crvena boja u hex sistemu je #FF0000. To je zato \u0161to je, kao i kod RGB, crvena na maksimumu, a ostale su isklju\u010dene. Jedna narad\u017easta je npr. #FF9900. Kod nje je opet crvena na maksimumu (FF), zelena je na odre\u0111enom nivou (99), dok je plava isklju\u010dena (00).<\/p>\n

\u00a0\"boje183\"<\/em><\/p>\n

Crvena hex boja – #FF0000<\/em><\/p>\n

Kao i kod RGB sistema, nema potrebe da pamtimo oznake boja i da ra\u010dunamo ru\u010dno. Mo\u017eemo na\u0107i oznake u raznim tabelama, u Photoshopu (na gornjoj slici color pickera ozna\u010deno sa plavom isprekidanom linijom) i tako dalje.<\/p>\n

Jo\u0161 jedna napomena oko hex sistema. Mo\u017ee se desiti da umesto npr #FF9900 primetite #F90 oznaku boje. Ovo nije gre\u0161ka, ve\u0107 je kra\u0107i na\u010din pisanja hex boja. On se mo\u017ee 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\u010daj, jer je svaka komponenta sastavljena od istih karaktera # FF 99 00,<\/em> i tako dobijamo #F90. Uvek mo\u017eemo koristiti i pun naziv sa \u0161est karaktera.<\/p>\n

Imena boja<\/strong><\/p>\n

Browseri prepoznaju 147 imenovanih boja. Mo\u017eemo za crvenu pisati jednostavno red<\/em>, za plavu blue<\/em> ili neke malo manje poznate kao \u0161to su Chocolate, DeepPink i tako dalje. Ovaj sistem je prili\u010dno neprakti\u010dan i uglavnom se izbegava. Sve dostupne boje mo\u017eete na\u0107i na ovoj adresi: http:\/\/www.w3schools.com\/cssref\/css_colornames.asp<\/a>.<\/p>\n

HSL[3]<\/strong><\/a><\/strong><\/p>\n

Ovaj na\u010din zapisivanja boja je novina u CSS3 i jo\u0161 uvek nije za\u017eiveo u potpunosti jer ga stariji browseri ne prepoznaju (Internet Explorer tek od verzije 9 ima podr\u0161ku za HSL).<\/p>\n

I ovaj sistem je sastavljen od tri komponente, stim da su one druga\u010dije od RGB i HEX varijanti. U HSL sistemu sre\u0107emo Hue<\/em> (Nijansa), Saturation<\/em> (Zasi\u0107enost) i Lightness<\/em> (Svetlina, osvetljaj).<\/p>\n