-
NAZIV OBJEKTA ZNANJA *
Oznaavanje boja u veb dizajnu
SADRAJ
Apstrakt
Osnove heksadecimalnog zapisa boja u HTML, CSS sa tabelama boja
i osnove korienja ifri u CSS u
Cilj *
Studenti ue na koji nain se boje predstavljaju u HTML kodu i
CSSu i koje su mogue varijacije.
Uvodne napomene
Naziv sekcije (1)
Oznaavanje boja u veb dizajnu - HTML
Sadraj sekcije (1)
Tri osnovne boje koje prenosi ekran su Crvena, zelena i Plava
(RGB red, green, blue) . HTML , CSS, SVG ifre za boje su
heksadecimalnom formatu : tri para dvocifrena broja koje
predstavljaju boje crvenu, zelenu i plavu sa prefiksom # (#RRGGBB)
Ovaj estocifreni niz je formiran na osnovu tri bajta u
heksadecimalnom zapisu Bajt 1: crvena vrednost Bajt 2: zelena
vrednost Bajt3 : plava vrednost Pri emu je najnia vrednost izvoru
svetla 0 (hex: 00) , a najvia 255 (hex: FF) Na primer u crvenoj
boji ifra boje je #FF0000, pri emu je "255" crvena, "0" zelena i
"0" plava. Ove ifre boje se koriste za boju pozadina, teksta i
tabela na veb stranicama. Osnove heksadecimalne ifre boje Ispod su
neke od osnovnih naziva i ifri boja. Za ove boje moete koristiti
imena umesto ifri. Na primer u HTML i CSS tagu moete staviti "red"
(crvena) umesto #FF0000
-
16 miliona razliitih boja Kombinacija vrednosti boja crvene,
zelene i plave varira od 0 do 255 (znai 256 vrednosti za svaku
boju) to nam daje 16,777,216 boja 256 256 256 (256
3, ili 256 na kub) = 16,777,216
Skraena heksadecimalna forma Ponekad se koristi skraena verzija
tako to se duplira svaka vrednost . Na primer 09C postaje 0099CC to
moemo videti u CSS primeru --->source code
.threedigit { color: #09C; }
.sixdigit { color: #0099CC; } /*ista boja kao iznad*/
source code
-
RGB ifre boja ifre za oznaku RGB boja su tri broja od 0-255 .
Crvena hex je #FF0000, rgb vrednost rgb(255,0,0)
Sigurne veb boje web safe colors pre nekoliko godina kada su
kompjuteri podravali maksimalno 256 boja, izbaena je lista sigurnih
boja za veb. Ona danas vie nije relevantna jer kompjuteri (i
browseri) podravaju milione razliitih boja.
-
Nijanse sive Sive nijanse se jednako koriste u osnaivanju izvora
boja.
-
Naziv sekcije (2, ...n)
CSS boje
Sadraj sekcije (2, ...n)
Stilski jezik CSS (Cascading Style Sheets ) definie i koristi
ifre i imenovanje za jednak broj boja kao i HTML4
specifikacija. Dodatno CSS 2.1 je dodao "orange" boju na
listu.
A CSS3 je uveo dve novine HSL boje i RGBA oznaavanje boja
HSL predstavlja skraenicu od Hue, Saturation, Light, pri emu se
prva cifra odnosi na boju, drugi procenat na
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
-
zasienost a trea na svetlinu
crvena boja hsl (0, 100%, 50%)
zelena boja hsl (120, 100%, 50%)
plava boja hsl (240, 100%, 50%)
RGBA model ima dodat alfa kanal (transparenciju) RGB
heksadecimalni zapis, to omoguuje bolju
manipulaciju u veb dizajnu sa transparentnim bojama. Do sada su
transparenciju podravali jedino slikovni
formati PNG i GIF.
rgba(255, 0, 0, 0.5)
Isto tako ALFA kanal moe da se doda i na HSL model pa imamo HSLA
boje sa transparencijom
--->source code
/* RGB model */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0%
*/
/* RGB with alpha channel, added to CSS3 */
p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity,
semi-transparent
*/
/* HSL model, added to CSS3 */
p { color: hsl(0, 100%, 50%) } /* red */
p { color: hsl(120, 100%, 50%) } /* green */
p { color: hsl(120, 100%, 25%) } /* dark green */
p { color: hsl(120, 100%, 75%) } /* light green */
p { color: hsl(120, 50%, 50%) } /* pastel green */
/* HSL model with alpha channel */
p { color: hsla(120, 100%, 50%, 1) } /* green */
p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green
*/
p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green
*/
source code
-
RGBA vrednosti: rgba (255,0,0,0.2) rgba (255,0,0,0.2) rgba
(255,0,0,0.2) rgba (255,0,0,0.2) rgba (255,0 0,1) RGB vrednosti rgb
(243,191,189) rgb (246,191,189) rgb (249, 95, 94) rgb (252, 47 ,47)
rgb (255, 0 , 0) Moemo uoiti da se u rgba modelu lae menja boja u
kodu, jer se menja samo poslednja alfa vrednost, dok kod rgb modela
moramo da promenimo sve tri cifre. Modele ifriranja boja moete
pogledati na online generatoru, koji po
HSL COLOR PICKER http://hslpicker.com/#a8ffd1,0.97
LINKOVI SA SLINIM SADRAJEM
Opis URL
W3school HTML COLORS
http://www.w3schools.com/html/html_colors.asp
Web colors-wiki http://en.wikipedia.org/wiki/Web_colors
RENIK POJMOVA I SKRAENICA
Termin Opis
heksadecimalni sistem
To je brojevni sistem u osnovi 16, odnosno sistem 16 razliitih
cifara. Obino se koristi 10 arapskih cifara i dodaju se slova
A-F
http://sr.wikipedia.org/wiki/
CSS
Cascading Style System je stilski jezik koji opisuje semantiku
prezentacije (izgled i formatiranje)
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
PODOBJEKTI ZNANJA (sluajevi korienja, procedure korak po korak,
reference, itd.)
Naslov podobjekta znanja
http://hslpicker.com/#a8ffd1,0.97http://www.w3schools.com/html/html_colors.asphttp://en.wikipedia.org/wiki/Web_colorshttp://sr.wikipedia.org/wiki/%D0%A5%D0%B5%D0%BA%D1%81%D0%B0%D0%B4%D0%B5%D1%86%D0%B8%D0%BC%D0%B0%D0%BB%D0%BD%D0%B8_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BChttp://en.wikipedia.org/wiki/Cascading_Style_Sheets
-
Sadraj podobjekta znanja
OSTALI PREDLOENI SADRAJ OD STRANE AUTORA
Naslov
Sadraj
