Vežba 5

Vežbu 5 počinjemo sa radom css box concept-a. Osnove ovog koncepta baziraju se na
pretpostavci da ceo sadržaj naše stranice može da se prikaže u vidu box-a(kutije). Da bismo ovo
razumeli u potpunosti potrebno je prikazati dva načina, preko kojih možemo da prikažemo
elemente: Block elementi i Inline elementi.

Slika 1.- Prikaz box concepta

Kad su u pitanju block elementi formiraju poseban blok koji preuzima maksimalnu moguću
širinu(width) na osnovu “parent”elementa. Primeri block elementa su: div, paragrafi, naslovi ili
elementi liste. Inline elementi su elementi koji uzimaju samo onoliko prostora koliko im je
potrebno. Ovi elementi nemaju dodatne linije za razliku od block elemenata, i ostaju u liniji sa
ostatkom dokumenta. Primeri ovih elemenata su: span tagovi, slike, strong tagovi i anchor
elementi. U nastavku ćemo prikazati i objasniti svaki element box model concepta kao i njegove
vrednosti. Ukoliko kreiramo jedan paragraf sa možemo demonstrirati svaki od elemenata i
njihove vrednosti.
 Slika 2.- Kreiranje paragrafa

Sada kad smo kreirali ovo možemo da dodamo property padding kako bi dodali prostor oko
teksta. Ovo može da se uradi na dva načina: prvi način je da za svaki deo pišemo pojedinačno
margine(top, left, bottom, right), drugi način je da unutar padding property-a pišemo vrednosti.
Ukoliko dodamo samo jednu vrednost npr. od 30px to znači da će se padding primeniti na sve 4
strane u vrednosti od 30px. Ukoliko koristimo dve vrednosti npr. (Padding: 30px 60px;) prva
vrednost će se odnositi na top i bottom padding, dok druga će se odnositi na left i right padding.
Postoji mogućnost da koristimo tri vrednosti prilikom definisanja padding-a gde će se prva
odnositi na top padding, druga na left i right padding a treća na bottom padding.
.box{
padding: 30px 60px 90px;
}
Nakon dodatih vrednosti dobijamo sledeći prikaz
 Slika 3.- Prikaz nakon dodatog padding-a
Ukoliko koristimo sve četri vrednosti unutar padding property-a redosled je sledeći: top, right,
bottom, left(u smeru kazaljke na satu).
Kad je u pitanju rad sa border-om da bismo radili s njim potrebno je prvo definisati border-style,
razlikujemo rad sa 3 property-a: border-width, borded-style I border-color. Border-width može
da koristi vrednosti ili keywords(thin, medium, thick). Default-na vrednost border-a je medium.
.box{
border-width: thick 15px thin 30px;
border-color: aquamarine;
border-style: solid;
}
U prethodnom primeru smo pokazali da je moguće koristiti kombinaciju keywords-a i unetih
vrednost, prilikom pokretanja dobijamo sledeći prikaz

Slika 4.- Prikaz nakon dodatog border-widtha

Kad je u pitanju border-style postoje 4 vrednosti sa kojima možemo da radimo: none(default-na

vrednost), dashed, dotted i solid. Poput prethodno navedenog border-widtha i ovde možemo da
koristimo jedan property i unutar njega možemo da radimo sa svim vrednostima pojedinačno za
svaku stranicu.
Sledeći property sa kojim radimo kod border-a je border-color. Kao i kod prethodnih property-a
možemo da korsitimo nazive boja, heksadecimanle vrednost i boje iz RGBa-a ili HSLa-a. Kako
bi sve ovo objedinili postoji mogućnost korišćenja border property-a gde možemo ispisati
vrednosti za svaki od prethodno navedenih property-a. Ukoliko ne navedemo vrednost boje,
browser će za vrednost boje preuzeti vrednost boje teksta.
.box{
Border: 15px solid grey;
}
Prilikom korišćenja margina, takođe je moguće definisati marginu na svakoj strani pojedinačno.
Margin-e rade sa vrednostima, procentima i vrednošću auto.

Slika 5.- Prikaz nakon dodatih margina

U nastavku ćemo pokazati još neka svojstva koja ćemo koristiti prilikom rada sa css-om. Jedno
od svojstva koje možemo da koristimo je dislay. Ovaj property po default-u kod anchor
elemenata je inline, pored ove vrednosti možemo da radimo sa none, block i inline-block.
Ukoliko želimo da dodamo npr margin-e i width property kod anchor elementa potrebno je
koristit inline-block. Visiable je još jedan od property-a koji možemo da koristimo i radi sa dve
vrednosti: hidden i visiable(default-na vrednost). Potrebno je napomenuti ukoliko želimo da
damo vrednost height našem div element od 100% neće se ništa desiti osim u slučaju kad je data
konkrenta vrednost za visinu njegovog “roditelj” elementa. Ukoliko želimo da popunimo taj
prostor u celoj dužini potrebno je dodati prvo vrednost unutar roditelj elementa koji je u ovom
slučaju body i elementa unutar kojeg se nalazi body odnosno html element.
 Slika 6.- Prikaz dobijene na kojoj visina div-a ispunjava celu visinu body elementa

Da bismo izračunali koliko prostora zauzima naš div element sa prethodne slike npr. uzimamo
content prostor koji iznosi 500px + padding sa leve i desne strane koji iznosi po 20px i border
koji iznosi 10px što je ukupno 560px. Ovo bi predstavljao problem ukoliko želimo da nam width
div-a iznosni tačno 500px, način kako bi ovo mogli da rešimo je da izračunamo tačne vrednosti
svakog elementa pojedinačno i uklopimo u cifru od 500px ili da koristimo css fiture border-box.
Ovaj property će “terati” sav naš content u granicama naših bordera umesto da prelaze granicu.

Slika 7.- Prikaz stranice pre korišćenja border-boxa

 Slika 8.- Prikaz stranice nakon korišćenja border-boxa

Kao što možemo videti border-box je smanjio visinu i širinu našeg div elementa kako bi stali u
kontejneru od 500px širine. Ovde takođe možemo definisati vrednosti kao što su min-width,
max-width, min-height i max-height. Uz pomoć datih property-a možemo definisati
prilikosmanjivanja ili povećavanja prozora pretraživača. Min-height nam daje mogućnost da naš
div element ne bude nikad manji od vrednosti koju mu prosledimo dok min-width omogućava da
prilikom sužavanaja prozora div ne bude manji od vrednosti koju prosledimo. Kad su u pitaju
Max-height i Max-width nam daju mogućnost da naš div kontejner ne bude veći od vrednosti
koje prosledimo. Može da se desi da priliko definisanje ovih property-a nema dovoljno mesta za
tekst paragrafa pa će određeni delovi biti van box elementa.

Slika 9.- Prikaz stranice nakon korišćenja min i max property-a

Kao što možemo videti sa prethodne slike tekst je “izbio” iz granica našeg div elementa. Ovo
možemo rešiti preko overflow property-a. Overflow nam omogućava rad sa 4 vrednosti: none,
hidden, scroll, auto. None je default-na vrednost i tekst koji je “preplavio” div elemenet ostavlja
kakav jeste, hidden sakriva deo teksta koji prelazi dok scroll nam daje scroll bar-ove kako bi
mogli da vidimo ceo teskt. Auto sklanja višak teksta i daje nam scroll bar-ove ukoliko je to
potrebno.

Slika 10.- Korišćenje overflow-a

Sledeći property sa kojim ćemo raditi je float. Float nam omogućava da sliku ubacimo pored
paragrafa npr. Možemo da radimo sa tri vrednošću ovog elementa poput none, left i right.
 Slika 11.- Prikaz float-a sa vrednošću right
Ukoliko prebacimo sliku sa leve strane I dodamo margine dobili bi sliku koja bi bila okružena
tekstom, bilo bi lepše ukoliko bi teskt bio poravnat samo sa naslovom.

Slika 12.- Prikaz poravnjavanja teksta sa leve strane

Ako dodamo float element kod naslova, naš paragraf će biti kompletno izbačen iz div elementa,
da bismo ovo rešili koristimo clear property. Ovo možemo izvesti na više načina: prvi način je
dodavanjem br taga na kraju našeg kontejnera i njegovim pozivanjem u css sa property-em
clear. Clear prepoznaje rad sa tri vrednosti: left, right, both I none. Left omogućava elementima
koji nisu tipa float da budu sa leve strane, both znači da elementi koji nisu tipa float mogu da
budu sa leve I desne strane dok none koji je default-na vrednost daje mogućnost da float
elementi budu sa obe strane.
 Slika 13.- Prikaz dodavanja clear-a sa leve strane
Drugi način sređivanja pređašnje situacije je preko overflow-a koji smo prethodno prikazali u
vežbi. Treći način i najbolji je micro fix hack.

.group:before,
.group:after{
content: "";
display: table;
}
.group:after{
clear:both;
}

Ova metoda kreira prazan saržaj, zatim stilizuje taj saržaj prikazujući tabelu. Tabela zatim kreira
ćelije i block koji se koriste pre pseudoklasa kako bi sprečili “colapse” gornje margine. Zatim se
koristi clear property. Ovu klasu je potrebno dodati gde imamo float elemenata kako bi naterali
date elemente da sadrže ceo sadržaj unutar njih.
U nastavku ćemo pokazati rad sa position property-em, ovaj property poznaje rad sa 4
vrednočću: static(vrednost po default-u), relative, absolute i fixed. Static vrednost je default-na
vrednost i svi elementi kojima je dodeljena ova vrednost su statički, nepokretni. Relative
vrednost daje nam mogućnost da dati element pomerimo preko offset-a, koji ne remeti pozicije
ostalih elemenata koji ga okružuju.
 Slika 14.- Korišćenje relative position-a na srednji element
Sledeća vrednost koji možemo da koristimo kod position-a je absolute. Prilikom korišćenja ove
vrednosti svaki element koji ima datu vrednost ne poštuje prostor ostalih elemenata.

Slika 15.- Korišćenje absolute position-a na srednji element

Kao što možemo videti ne poštuje se prostor top i bottom elemenata jer se middle element nalazi
na njima i “fiskiran”je tu gde smo ga postavili. Ovo možemo rešiti tako što ćemo postaviti
“parent” container kao relative, a samim tim svaki sadržaj koji se nalazi unutar njega postaje
relative za parent container.
 Slika 16- Postavljanje parent elementa da bude drugi tip sem static
Poslednja opcija kod position-a je fixed. Po svojim osobinama slična je absolute opciji uz par
razlika. Fixed positon ostaje fiksiran na tom mestu gde ga fiksiramo ne zavisno od scroll-a.
Primer ovoga su stranice poput Twitter-a gde je zaglavlje fiksirano bezobzira koliko korisnik
scroll-a dole. Kako bi pozicionirali elemente kako želimo po redosledu, pored postion property-
a možemo da koristimo z-index. Z-index nam daje treću dimenziju i omogućava da složimo
elemente jedan iza drugog kako želimo.

Slika 17.- Korišćenje z-indexa kako bi pozicionirali elemente

U nastavku vežbe upoznaćemo se sa osnovnim vrednostima background property-ima.

Background-color je jedan od property-a sa kojim se najčešće srećemo i podržava sve vrednosti
boja koje smo napomenuli priliko rada sa bojama(vrednosti, heksadecimalne vrednosti, rgb(a),
hsl(a)). Background-image je takođe jedna od vrednosti koja se često koristi i daje nam
mogućnost da za pozadinu postavimo sliku.Pošto se layer background-image-a nalazi ispod
layer-a slike, ukoliko slika ne postoji u navedenom direktorijumu dobra praksa je postaviti
pozadinu slične boje ukoliko se slika ne učita. Background-image se uglavnom koristi u
dekorativne svrhe, za teksture, liste, dugmice i ikonice. Sajt sa kojeg možete preuzeti patterne za
vaš seminarski rad https://www.toptal.com/designers/subtlepatterns/. Sledeća property sa kojim
ćemo raditi je repeat. U slučaju da ubacimo sliku kao pozadinu, ako je data slika mala ovaj
property će imati njegovu default-nu vrednost repeat.
 Slika 18.- Korišćenje background-repeat property-a
Ovaj property može da ponavlja sliku po x i y osi, takođe daje mogućnost da se slika ne
ponavlja(repeat-x, repeat-y, no-repeat). Korišćenjem no-repeat vrednosti slika će po default-u
stojati u gornjem levom uglu, ukoliko želimo da pozicioniramo sliku možemo koristiti
background-position. Ovaj property rad sa position keywords, vrednostima i procentima. Prva
vrednost se daje za x osu, druga za y i treća za z osu.
Poslednji property sa kojm ćemo raditi u okviru background property-a je background-
attachment. Ovaj proprety nam daje mogućnost prikaza slike prilikom scrolla, ako želimo da se
content scroll-uje dok je slika fiksirana, biramo scroll ali ovo je default vrednost pa ne moramo.
Drugi slučaj je ukoliko želimo da slika bude fiksirana u delu koji je dostupan vidu
korisnika(viewport) biramo opciju fixed. Poslednja opcija je local i koristimo je u slučajevima
kad je slika vezana za content i prilikom scroll-a contenta scroll-uje se i slika.

Slika 19.- Korišćenje local i fixed attachmenta

Kako bi smo dobili oble ivice našeg box-a možemo da koristimo border-radius. Ovaj property
ima vrednosti border-top-right, border-top-left, border-bottom-right i border-botton-left,
vrednosti sa kojima možemo da radimo su sve merne jedinice koje smo pokazali(cm, mm, in, pc,
pt, px) i procenti. Prilikom korišćenja ovog property-a možemo da unesemo i dve vrednosti od
kojih će prva prikazati horiznotalni radius a druga vertikalni radius. U kombinaciji ove dve
vrednosti dobićemo eliptični radius.

Slika 20.- Korišćenje radius-a

Naravno kao i vеćinu prethodnih property-a možemo da koristimo border-radius property kako
bi objedinili sve prethodno navedene property-e. Prilikom navođena možemo raditi sa jednom
vrednošću koja će se odnositi na sva četri ugla, dve vrednosti od kojih je prva za gornji levi i
donji desni ugao a druga gornji desni i donji levi. Kad radimo sa tri vrednosti prva vrednost je za
godnji levi, druga za gornji desni i donji levi dok je treća za donji desni. Kad se koriste četri
vrednosti ide se smerom kazaljke na satu.

.box{
Border-radius: 50px 25px;
}

Prethodni primer kad koristimo dve vrednosti da bismo odredili radius. Međutim želimo takođe
da odredimo horizontalni i vertikalni radius, potreno je dodati “/”. Prethodni primer bi izgledao

.box{Border-radius: 50px 25px / 100px 50px;}

Prve dve vrednosti bi bile za horizontalni radius a druge dve za vertikalni radius.
Rad sa box-shadow-om je sličan radu sa text-shadow-om. Prva vrednost je strana u koju će ići
senka(pozitivna desno, negativna levo), druga vertikalni smer, treća(blur) senke i četvrta koja se
razlikuje u odnosu na text-shadow je vrednost rasipanja senke. Za jedan box možemo dodati više
senki koje se odvajaju zarezima i prva senka navedena će biti na vrhu dok poslednja će biti ispod
svih. U koliko želimo da senka ide ka našem boxu dodajemo inset(inset mora da bude ili na
početku deklaracije ili na kraju inače se cela linija ignoriše).

Slika 21.- Korišćenje box-shadowa

.box{
box-shadow: inset 2px 2px 15px 5px blue, -2px -2px 15px 5px red, 0 20px 25px -8px #000;
}

Iz prethodno navedenog primera dodata je senka koja se jedna nalazi unutar boxa, dok su dve
van boxa. Ako želimo da i ostale senke budu unatar potrebno je posle svakog zareza dodati inset.