MULTIMEDIJI I GLOBALNI MEDIJI
HTML I CSS
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Uvod
Boje su jedna od oblasti u kojima je CSS već dugo naš prijatelj. Pošto su boje određene kombinacijom hardvera računara, operativnog sistema i
pretraživača, CSS smo relativno rano počeli da koristimo za bojenje pozadine i teksta. Ovde ćete naučiti kako da boju primenite za pozadinu strane ili elementa,
pa čak i kako da ih ubacite u tabele.
Opcije CSS-a koje se odnose na boje su mnogobrojne i ima ih mnogo više nego u HTML-u. U CSS-u možete da izaberete heksadecimalne boje, heksadecimalno skraćeno predstavljanje boja, RGB boje, procente za boje ili neku od 17 boja koja CSS 2.1 podržava.
CSS ima i izvanrednu podršku za slike. Mogućnost postavljanja slika u pozadinu nekog elementa je ono što web dizajnerima omogućava da naprave
sjajne strane i da se oslobode ograničenja koja donose tabele. U ovom poglavlju ćete naučiti kako da slike primenite na pozadinu i elemente, a upoznaćete se i
sa metodama upotrebe slika za različite vizuelne tehnike.
U CSS-u postoje mnogobrojne opcije za rad sa slikama. Možete kontrolisati način na koji se slike postavljaju kao pločice (ili se ne postavljaju tako),
možete ih fiksirati na lokaciju unutar pozadine elementa, možete omogućiti kretanje slika ili ih fiksirati tako da tekst ide preko njih - mnogo je mogućnosti.
Isprobaćete sve ove mogućnosti tako da dobijete osećaj da CSS ne samo što omogućava da slike koristite na način na koji u CSS-u nikad niste mogli,
već i daje mogućnosti kontrole koje su vrlo potrebne.
Do sada ste radili na strukturi sadržaja u HTML-u, ubacivanju slika i medijalnog sadržaja, radu sa tabelama i formama. Sve što ste do sada radili bilo je
kreiranje platna. Sada na to platno treba dodati malo boje i života, tako da beživotni dokumenti ožive.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Boje i CSS
Da biste u CSS-u mogli da koristite boje na pravi način, morate poznavati načine na koje se boje mogu definisati. Iako se boja može zadati pomoću
različitih osobina, postoje neke specifične vrednosti koje morate poznavati.
Heksadecimalne boje
Heksadecimalni sistem je brojni sistem sa osnovnom 16. On je koristan u računarstvu pošto se 8 bitova (1 bajt memorije) može predstaviti pomoću jednog slova ili broja. Sistem koristi brojeve od 0 do 9, kao i slova od a do f. Prave se kombinacije od šest znakova (počev od tarabice) i tako se predstavljaju boje.
Predstavljaju se učešće crvene, zelene i plave boje (#RRGGBB).
#FFFFFF = 255, 255, 255 - bela
Za predstavljanje boja u HTML-u i CSS-u se može korististiti bilo koja heksadecimal-na kombinacija (pogledajte primer 8.1).
Primer 8.1 Boja prikazana heksadecimalnim brojem
body {color: #FFCC99; background-color: #808080;}
a {color: #66CC33;>
Ako biste ovakve stilove primenili na svoj dokument, pozadina bi bila sive boje, tekst boje breskve, a boja linka bi bila svetio zelena.
Heksadecimalne skraćenice
Ove skraćenice omogućavaju da skratite heksadecimalne boje, kod kojih su vrednosti predstavljene u parovima. To znači da vrednosti RR, GG i BB
treba da budu iste, kao što je na primer #00CC33 ili #888888. Kod skraćenica se jedan od brojeva u svakom paru može izostaviti, tako da se dobija “0C3 ili
“888. Ako bi boja bila, na primer, #808080, gde vrednosti parova nisu iste, ne možete da napravite skraćenicu (videti primer 8.2).
Primer 8.2 Boja prikazana heksadecimalnom skraćenicom
body {color: #FC9; background-color: #808080;}
a {color: #6C3;}
Heksadecimalne skraćenice možete koristiti u svakom CSS dokumentu, ali ne i u HTML-u.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
RGB vrednosti
Drugi način za predstavljanje boja u CSS-u je da se zadaju RGB vrednosti. Ove vrednosti možete pronaći u bilo kom programu za obradu slika, kao što
je na primer Photoshop (videti sliku 8.1).
Slika 8.1 Pronalaženje RGB vrednosti za sivu boju koristeći Photoshop
U ovom slučaju se boja predstavlja na sledeći način:
color: rgb(128, 128, 128);
Procenti RGB-a
Boju možete zadati i pomoću procenata crvene, zelene i plave. Vrednost 0% je crna, a 100% je bela. Prema tome, ako boju zadate kao:
color: rgb(50%, 100%, 30%); dobićete svetlozelenu boju.
Imena boja
Za opisivanje boja možete koristiti sedamnaest imena boja. Imena su aqua, blue, fuch-sia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow i orange (orange je uvedena u verziji CSS 2.1).
color: orange;
Verovatno se pitate koji bi način definisanja boja trebalo da koristite. Najpošteniji odgovor? Sve njih! Verovatno ćete biti u situaciji da koristite kombinaciju
ključnih reci, skraćenica i heksadecimalno prikazivanje.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Dodavanje boje pozadine
Dodavanje boje pozadine je izuzetno jednostavno i vrlo korisno. Boja se može dodati u pozadinu strane ili nekog elementa.
Boje i pozadina dokumenta
Boja se u pozadinu dokumenta dodaje tako što se izabere element body i njegovoj osobini background-color dodeli određena boja:
body {background-color: #999;}
Za celo telo dokumenta ovde sam izabrao tamno sivu pozadinu. Kada se ovo prikaže u pretraživaču, cela strana postaje siva (videti sliku 8.2).
Slika 8.2 Primena boje na pozadinu dokumenta
Uvek bi trebalo definisati boju pozadine na strani, čak i ako nameravate da dalje koristite pozadine grafičkih ili drugih elemenata. Razlog je što
pretraživači vrlo brzo interpretiraju boje i prikazuju ih pre grafike, tako da korisnici imaju bolji vizuelni osećaj.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Boje i pozadine elementa
Pomoću CSS-a možete da dodate boje i pozadini pojedinih elemenata. Ovo se radi tako što se izabere element i napravi pravilo. Ja ću to uraditi za element hl i primeniti na dokument koji koristimo kao primer:
body {background-color: #999;}
hl { background-color: #6ca2d0;}
Na slici 8.3 je prikazan element 8.3 sa dodatom bojom pozadine.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Ubacivanje tabela pomoću boje pozadine
U ovom odeljku ću vam pokazati kako se pomoću boje pozadine mogu ukrasiti tabele. Do sada sam koristio selektore elemenata, koji su direktno vezani
sa određenim HTML elementom, kao što su body, hl, p ili a. U ovom odeljku ćete se upoznati sa tzv. selektorom klasa.
Selektori klasa su korisnički selektori kojima dajete ime. Ispred imena se postavlja tačka, na primer: imeklase. Klase se onda primenjuju na element u
HTML-u pomoću atributa class, zajedno sa imenom klase:
<tr class=”imeklase”> ... </tr>
Obično ime klase opisuje funkciju te klase, a ne način predstavljanja. To znači, ako želite da boju pozadine definišete za svaku vrstu u tabeli, onda ime
klase treba da bude nešto poput .alternativnavrsta, a ne .siva. Na taj način, ako želite da promenite boju, ne morate da u dokumentu menjate ime klase, jer se
time narušavaju prednosti koje donosi CSS.
U primeru 8.4 je data tabela . Primetićete da sam u kodu promenio jednu stvar. Izbacio sam sve atribute tabele, osim atributa cellspacing. Razlog je u
tome što u CSS-u ne postoji efikasan način za definisanje ovog atributa.
Takođe sam dodao i ugrađenu listu stilova, koja sadrži stilove za osobine tabele width, border i padding. Tu su i selektori elemenata, kao i selektor klase koji se
koristi za definisanje boje pozadine.
Primer 8.4 Izgled tabele sa elementom
<!D0CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtinl1/DTD/xhtJiil1-transitional.dtd”>
<html xffllns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Rad sa stilovima</title>
<style type=”text/css”>
body {color: white;}
caption {background-color: #999; border: 1px solid black;}
table {background-color: #ccc; border; 1px solid black; padding: 5px; width: 90%;}
th {background-color: #333; border:}
tr {background-color: #999;}
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
td {background-color: #ccc; border: 1px solid black;}
.highlight {background-color: #fff; color: orange;}
</style>
</head>
<body>
<table cellspacing=”5”>
<caption>Comparing weatrier and time zones</caption>
<tr>
<th>Location</th>
<th>Tucson, Arizona</th>
<th>Las Vegas, Nevada</th>
</tr>
<tr>
<th>Weather</th>
<td>Warm to Hot</td>
<td>Warm to Hot</td>
</tr>
<tr>
<th>Time Zone</th>
<td>No Daylight Savings</td>
<td class=”highlight”>Mountain Standard Time</td>
</tr>
</table>
</body>
</html>
Rezultat je prikazan na slici 8.5.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Slika 8.5 Stil tabele definisan pomoću selektora elementa i selektora klase
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Ubacivanje grafike u pozadinu
U pozadinu dokumenta ili bilo kog elementa možete ubaciti i grafiku. Postoje dva načina da se pomoću CSS-a kontroliše pozadina, ali postoji mnogo
više opcija kada dođe do primene na vizuelni dizajn. Kombinacijom pozadine dokumenta i elemenata možete napraviti nivoe sa slikama i različite specijalne
efekte.
Grafike koje se postavljaju u pozadinu su obično male sličice koje se postavljaju poput pločica, ili horizontalna ili vertikalna grafika sa različitim bojama, slikama, pa čak i tipografskim karakteristikama. Na Internetu možete pronaći puno slika koje se koriste za pozadinu (videti sliku 8.6} ili možete da sami
napravite sliku.
Slika 8.6 Tekstura za pozadinu, koju sam pronašao na adresi http://www.grsites.com/textures.
Hajde da sada vidimo kako se grafika ubacuje u pozadinu dokumenta. Ovo se radi izborom elementa body i kreiranjem pravila, koje koristi osobinu
background-image, sa vrednošću lokacije i imena slike:
body {background-image: url(bgslika.jpg);}
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Na slici 8.7 je prikazan rezultat postavljanja ove slike u pločastom rasporedu. Obratite pažnju na to da slike ispunjavaju celu vidljivu površinu, čime se
dobija interesentan izgled.
Slika 8.7 Postavljanje slika u pločastom rasporedu u pozadinu
Slike se mogu dodati i elementima. Ako želite da se ova slika prikaže u pozadini svih vaših naslova, mogli biste da napravite sledeće pravilo:
h1, h2, h3, h4, h5, h6 {background-image: url(gray.jpg);}
Posle ovog će sva zaglavlja u pozadini imati ovu sliku.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Kontrola načina na koji se postavljaju slike u pozadini
CSS omogućava da kontrolišete način na koji se slike u pozadini postavljaju u pločice. Ovo se radi pomoću osobine background-repeat, kojoj treba zadati odgovarajuću vrednost.
Ispunjavanje po horizontalnoj osi
Horizontalna osa, odnosno x osa, omogućava da se slike postavljaju po horizontalnoj osi elementa, ali ne i po vertikalnoj.
body {background-image; url(bgslika.jpg); background-repeat: repeat-x;}
Rezultat je prikazan na slici 8.8.
Slika 8.8 Kontrola horizontalnog postavljanja ploča pomoću osobine background-repeat
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Ispunjavanje po vertikalnoj osi
Slično prethodnom, slike se mogu postavljati tako da se ploče ponavljaju samo po vertikalnoj osi. Ovo se radi ponovo pomoću osobine background-repeat, ali sada sa vrednošću repeat-y.
body {background-image: url(bgslika.jpg); background-repeat: repeat-y;}
Kao što vidite na slici 8.9. slika se sada postavlja samo po vertikalnoj osi.
Slika 8.9 Ponavljanje slika po vertikalnoj osi
Ako se zada vrednost no-repeat, onda se slika ne ponavlja. body {background-image: url(bgslika.jpg); background-repeat: no-repeat;}
Ovim se slika postavlja u gornjem levom uglu, ali se ne ponavlja po strani.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Postavljanje grafike za pozadinu
Zajedno sa postavljanjem u vidu ploča, grafiku u pozadinu možete da postavite i na bilo koje drugo mesto. Ovo se odnosi i na dokument i na bilo koji element. Da biste definisali poziciju grafike za pozadinu, prvo treba da osobinu background-repeat postavite na no-repeat. Nakon toga možete da zadate poziciju
pomoću neke od vrednosti koje sam opisao u tabeli 8.1.
Tabela 8.1 Vrednosti za osobinu background-posifion
Tip vrednosti Primer Postavljanje
Procenat background-position: 0% 0%;
background-position: 100% 100%;
background-position: 14% 80%;
Dužina background-position: 20 px 20px;
ključne reći background-position:top left;
background-position; left top;
background-position: top center;
background-position: center top;
background-position: right top;
background-position: top right;
background-position: left;
background-position:left center;
background-position: center left;
background-position: center
background-position: center center;
background-position: right;
background-position: right center;
background-position: center right;
gornji levi ugao
donji desni ugao
14% odozgo, 80% naniže
20 px s leva, 20px naniže
0% 0%
50% 0%
100% 0%
0% 50%
50% 50%
100% 50%
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Tip vrednosti Primer Postavljanje
ključne reči background-position: bottom left;
background-position: left bottom; background-position: bottom;
background-position: bottom center;
background-position: center bottom; background-position: right bottom
background-position: bottom right; 0% 100%
50% 100%
100% 100%
Zbunjeni ste? Bio sam i ja, dok nisam počeo da se bavim postavljanjem pozadine. Ono što je važno da zapamtite je da je kod procenata i dužina prva
vrednost za horizontalu, a druga za vertikalu. Kod ključnih reči je ponašanje ono koje je opisano u tabeli.
NAPOMENA
Vrednosti u procentima i pikselima možete kombinovati, ali ne i ključne reči. Tako, na primer, možete imati vrednost 100% 20px, ali ne i 100% lef t.
Ako se zada samo jedna vrednost za procenat ili dužinu, ona se primenjuje na horizontalnu poziciju, a vertikalna pozicija dobija podrazumevanu vrednost 50%.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
U primeru 8.5 smo podesili listu stilova sa primerom za svaki tip vrednosti.
Primer
8.5 Postavljanje grafike u pozadini, u procentima
body {
background-color: white;
background-image: url(heder_02.gif);
background-repeat: no-repeat;
background-position: 0% 0%;}
Slika 8.10 Primer background-position
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Skraćenice u CSS-u za pozadinu
Drugo interesantno parče CSS-a je da određene osobine imaju i skraćenice. Ovo postoji samo kod osobina koje se puno koriste, a background je jedna
od njih. Skraćenice kombinuju karakteristike svih vezanih osobina. U slučaju osobine background, to znači da se kombinuju osobine color, image, repeat i attachment. Ovo se sve kombinuje u jedno pravilo, sve pomoću osobine background.
Da biste mogli da uporedite, u primeru 8.7 su prikazani stilovi za sve osobine pozadine.
Primer 8.7 Duži način za definisanje stila pozadine
body {
background-color: white;
background-image: url(apple.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom right;}
Skraćena verzija, koja je ekvivalentna prethodnoj je:
body { background: white url{images/lemon-slice.gif) no-repeat scroll right bottom;}
Napravio sam jednu HTML stranu sa malo teksta i primenio stilove pomoću skraćene verzije (videti sliku 8.14).
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Slika 8.14 Primena osobina za pozadinu pomoću CSS skraćenice
Naravno da i duža i kraća verzija daju isti rezultat.
dipl.ing. Aleksandar Rikalović M.Sc.
Boje i slike u CSS-u
multimediji i globalni mediji
Želite li još malo da se zabavite
Nadam se da ćete se, sada kada za ulepšavanje strana možete da koristite boje i slike, više zabaviti.
Kao što vidite, CSS ima puno opcija za rukovanje bojama, čiji cilj nije samo zabava. Iako je manipulisanje slikama na ovaj način prilično fleksibilno,
ipak bi te slike trebalo odvojiti od inlajn slika.
CSS Zen Garden (http://www.csszengarden.com) je fantastično mesto da vidite da se slike ne stavljaju uvek inlajn u dokument. Sve sjajne slike koje se
nalaze na ovom sajtu su postavljene u pozadinu elemenata i njima se rukuje pomoću tehnika sa kojima ste se upoznali u ovom poglavlju.
Sada treba da naučite kako da podesite svoj tekst. Ovo sam postavio posle boja i slika, pošto se ti elementi integrišu sa tekstom.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 7