close

Enter

Log in using OpenID

03. CSS - Ipng.hr

embedDownload
28.1.2012.
CSS
voditelj: Višeslav Račić, prof, ACE
e‐mail: [email protected]
1
•
•
•
•
•
•
Uvod u CSS
Pravila pisanja CSS‐a
Osnovna svojstva CSS‐a
Napredno korištenje CSS‐a
Razmještaj elemenata
CSS 3
2
1
28.1.2012.
Uvod u CSS
• CSS – Cascading Style Sheets
– određuju način na koji će se prikazati elementi HTML‐a, tj. dizajn HTML elemenata
– omogućuje razdvajanje oblikovanja od sadržaja
– ideja je došla iz izdavaštva (knjiga i časopisa)
– stilovi su opisani "predlošcima stilova" (Style Sheets")
• Prednosti:
– Proširena mogućnost dizajniranja
– Mogućnost ažuriranja
3
http://www.csszengarden.com/
4
2
28.1.2012.
Tipovi CSS‐a
1. stilovi koji se primjenjuju na 1 element
– linijski stilovi (inline style sheets)
2. stilovi koji se primjenjuju na 1 dokument
– unutarnji ili umetnuti stilovi (embedded
style sheets)
– stilovi se definiraju u zaglavlju HTML dokumenta (unutar <head> elementa)
5
3. stilovi koji se primjenjuju na više dokumenata (vanjski stilovi)
– vezani stilovi (linked style sheets)
• stilovi se definiraju u posebnom css
dokumentu
– uvezeni predlošci (imported style sheets)
• stilovi se definiraju u posebnom css
dokumentu
• mogu se navesti unutar HTML ili css
dokumenta
6
3
28.1.2012.
Linijski predlošci (eng. inline)
• primjenjuju se na 1 element
• Na određeni HTML element primjenjuje se style
atribut
• svojstva i vrijednosti su vrijednost style atributa i navode se pod navodnim znakovima
<p style="color: red; font-style: italic;">
• imaju najviši prioritet kod primjene
• nedostatak: uz svaki element moraju se navoditi sva svojstva i vrijednosti
7
Unutarnji predlošci (eng. embedded)
• primjenjuju se na čitav dokument
• koristi se HTML <style> element u zaglavlju dokumenta
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
• „ubijaju” vanjski css stil ukoliko je postavljen
• nedostatak: u svakom HTML dokumentu moraju se navoditi svi stilovi
8
4
28.1.2012.
Vezani predlošci (eng. linked)
• primjenjuju se na više dokumenata
• stil se navodi u posebnom css dokumentu i veže na više HTML dokumenata putem
• <link> elementa u zaglavlju <head> dokumenta
•
•
<link rel=”stylesheet” type=”text/css” media=”screen”
href=”styles.css” />
<link rel=”stylesheet” type=”text/css” media=”print”
href=”stylesPrint.css” />
• prednosti: – HTML stranice sa sličnim ili istim stilom su puno manje
– kod izmjene stila dovoljno je izmijeniti css datoteku s definicijom stila
9
Uvezeni predlošci (eng. imported)
• primjenjuju se na više dokumenata
• stil se navodi u posebnom css dokumentu i veže na više HTML dokumenata
@import url(styles.css)
• u HTML dokumentu navodi se unutar HTML <style> elementa u zaglavlju dokumenta
<style>
@import url(styles.css);
</style>
• iste prednosti kao kod vezanih predložaka
10
5
28.1.2012.
Pravila pisanja CSS‐a CSS ne razlikuje mala i velika slova
Na kraju „naredbe” nalazi se ;
Između svojstva i vrijednosti nalazi se :
Sva svojstva nekog selektora(HTML oznake koju uređujemo) nalaze se unutar { }
• Deklaracija – cjelina koju čine svojstvo i vrijednost
•
•
•
•
11
– selector {property: value}
– selector {property: value; property:
value}
12
6
28.1.2012.
• selektor ‐ osnovni element CSS‐a koji definira izgled svih elemenata na koje je primijenjen (odgovarajući izgled)
• „defaultni selectori” ‐ svaki element HTML‐a ima odgovarajući selektor (tijelo dokumenta=body, odlomak=p, tablica=table, redak tablice=tr,...). Ime je jednako oznaci HTML‐a
• class selectori ‐ za opis razreda
– imenuju se s točkom ispred imena (npr .istaknuto )
– isti stil se primjenjuje na više elemenata istog razreda
• id selectori ‐ za opis pojedine instance
– imenuju se s oznakom "hash" ispred imena (npr #zaglavlje)
– stil se primjenjuje samo na jedan element (jedinstven)
13
• Grupiranje selektora
– stiliziranje na identičan način
– selektori se odvajaju zarezom
h1, h2 {
font-size: 16px;
color:#333; }
– isto je što i h1 { font-size: 16px;
color:#333; }
h2 { font-size: 16px;
color:#333; }
– smanjivanje veličine CSS datoteke, – brže učitavanje stranice
14
7
28.1.2012.
Osnovna svojstva CSS‐a
Svojstva za uređivanje teksta
• kontroliraju tekst unutar odgovarajućeg elementa (boju, poravnanje, dekoraciju...).
– color ‐ boja teksta
• vrijednosti: naziv boje, hex ili rgb oznaka
• color: red; / color: #ff0000; / color: rgb(255,0,0);
– text-align ‐ horizontalno poravnanje teksta
• vrijednosti: left, right, center, justify
– text-decoration ‐ dekoracija teksta
• vrijednosti: underline, overline, line‐through, blink, none
– text-indent ‐ uvlači prvu liniju teksta
• vrijednosti: u mjernoj jedinici (em, px, %,...)
– text-transform ‐ formatiranje teksta
• vrijednosti: uppercase, lowercase, capitalize, none
15
– font-family ‐ naziv obitelji ili specifičnog fonta
• vrijednosti: naziv obitelji ili naziv fonta
sans-serif;
monospace; cursive; fantasy
– font-size ‐ veličina fonta
• 5 osnovnih obitelji fontova: Serif;
• vrijednost ‐ izražena u raznim mjernim jed, (mm, cm, px, em, %,...)
• 16px = 1em = 100% = 12pt
• 10px = 62,5%
– font-style ‐ stil fonta
• vrijednost: italic, normal
– font-weight ‐ debljina fonta
• vrijednost: bold, bolder, lighter, normal, 100, 200,300,400...,900
16
8
28.1.2012.
Svojstva elemenata liste
• kontroliraju svojstva oznake elemenata liste koji se nalazi ispred sadržaja
– list-style-type ‐ vrsta oznake elementa liste
• vrijednosti kod pobrojane liste: disc, circle, square
• vrijednosti kod poredane liste: decimal, lower‐roman, upper‐
roman, lower‐alpha, upper‐alpha
• vrijednost kada se žele elementi bez oznaka: none
– list-style-image ‐ sličica koja se prikazuje kao oznaka
• vrijednosti: url(adresa na kojoj se nalazi sličica)
– list-style-position ‐ pozicija oznake u odnosu na tekst
• vrijednosti: inside, outside
17
Svojstva za uređivanje elemenata
• kontroliraju pozadinu odgovarajućeg elementa.
– background-color ‐ boja pozadine
• vrijednosti: naziv boje, hex ili rgb oznaka
– background-image ‐ slika na pozadini
• vrijednosti: url(slika1.jpg)
• background: url(http://www.algebra.hr/slike/logo.jpg)
– background-repeat ‐ ponavljanje slike
• vrijednosti: repeat, repeat‐x, repeat‐y, no‐repeat
– background-attachment ‐ hoće li se slika pomicati kako se pomiče stranica
• vrijednosti: scroll, fixed
18
9
28.1.2012.
• Obrub elementa
– border-style ‐ način na koji je iscrtan okvir
• vrijednosti: solid, dashed, dotted, inset, outset, ridge, groove, double
– border-color ‐ boja okvira
• vrijednosti: naziv boje, rgb ili hex oznaka
– border-width ‐ debljina okvira
• vrijednosti: thin, medium, thick ili debljina u px
– moguće je baratati pojedinačno sa svojstvima svake strane okvira
• border‐[top|bottom|right|left]‐[style|color|width]
• border: 5px solid $F000;
• border-bottom: 5px solid black;
19
• Margina
– Razmak između dva HTML elementa
– postavljanje u jedinstvenoj margini:
• margin: 10px;
– zasebno za svaku marginu:
•
•
•
•
margin-top: 10px;
margin-right: 5px;
margin-bottom:10px;
margin-left: 5px;
– kao niz četiri vrijednosti svojstva margin:
• margin: 10px 5px 10px 5px;
• margin [top|right|bottom|left]
• margin: 5px 1px 3px [top|right|bottom, left]
20
10
28.1.2012.
• Padding
– Udaljenost sadržaja HTML elementa od obruba
– postavljanje jedinstvenog paddinga:
• padding: 10px;
– zasebno za i padding:
•
•
•
•
padding-top: 10px;
padding-right: 5px;
padding-bottom:10px;
padding-left: 5px;
– kao niz četiri vrijednosti svojstva padding:
• padding : 10px 5px 10px 5px;
• padding [top|right|bottom|left]
21
• Širina i visina elementa
– Može se postaviti svakom elementu postavljanjem apsolutnih ili relativnih vrijednosti (u odnosu na element unutar kojega se nalazi)
– Deklaracija širine elementa:
• width: 750px;
• width: 80%;
– Deklaracija visine elementa:
• height: 500px;
• height: 50%;
22
11
28.1.2012.
• Svojstvo overflow
– Ukoliko se nekom elementu definira visina, što se događa s elementom
– Ako je u <p> više sadržaja, biti će ignoriran height
• overflow: auto;
• Dodaje se scrollbar kako bi se zadržala željena visina i širina dokumenta
23
CSS BOX MODEL
• raspored elemenata unutar stranice, • prostor koji okružuje HTML elemente
• sastoji se od:
– Contenta –dio elementa gdje se pojavljuju npr. tekst i slike.
– Paddinga – prazni prostor između sadržaja i ruba. Na padding se primjenjuje ista boja pozadine kao i na sadržaj.
– Bordersa – Rub okružuje sadržaj i padding. – Margina –predstavljaju prostor koji se nalazi izvan ruba. Nemaju boju pozadine i potpuno su prozirne.
24
12
28.1.2012.
• Za razumijevanje je nužno poznavanje razlike između inline i block‐level
elemenata
• Block‐level elementi / zauzimaju cijelu širinu elementa unutar kojeg se nalaze i defaultnu visinu. Postavljaju se jedan iznad drugog, od vrha prema dnu, Neki block‐level elementi su:
<div>, <pre>, <p>, <ul>, <ol>, <li>, …
• Inline elementi su, „in‐line” (u liniji). Postavljaju se jedan do drugog, s lijeva na desno. Zauzimaju točno određenu širinu i visinu sadržaja, tj. ukoliko sadržaja nema oni neće imati širinu i visinu. Neki od inline
elemenata su:
<img>, <em>, <strong>, <a>, <span>, …
• Svi HTML block‐level elementi imaju 5 „prostornih” svojstava: height, width, margin, padding, i border.
• Širina i visina su problematične jer „zahtijevaju” malo računanja. U obzir se mora uzeti cijeli box.
25
• Širina (width) = 260px ?
• width se odnosi na područje contenta
– 260 („width”) – 180 (m,p,b) = 80px width of content
širina modela na slici je 260px
Margina, padding i border iznose po 30px SA SVAKE STRANE
div {
margin:30px;
border:30px solid yellow;
padding:30px;
width:80px;
height:80px;
}
www.noupe.com
26
13
28.1.2012.
• Veze i pseudoklase veze
– Element <a> može se stilizirati u nekoliko razina ili pseudoklasa
– Sintaksa pseudo klase
• selector:pseudo-class {property:value;}
– Pseudo klasa sa CSS klasom
• Selector.class:pseudo-class
{property:value;}
• Svaki <a> element (veza) u sebi sadrži tri pseudoklase
tj. stanja: link; hover; visited
27
•
•
•
•
a:link {color:#FF0000;} /* neupotrijebljena veza */
a:visited {color:#00FF00;} /* posjećena veza */
a:hover {color:#FF00FF;} /* pokazivač iznad veze */
a:active {color:#0000FF;} /* selektirana veza */
• NAPOMENE:
– a:hover MORA DOĆI NAKON a:link i a:visited kako bi bio učinkovit
– a:active MORA DOĆI NAKON a:hover kako bi bio učinkovit
– Pseudo klase također nisu case‐sensitive.
28
14
28.1.2012.
Napredno korištenje CSS‐a
KLASE
– Ekstenzije selektora – za jedan selektor moguće je odrediti više stilova
– Ispred klase dodaje se točka .
– iza imena selektora dodati ime klase kao ekstenziju selektora
p.prvi {color:#0000FF;}
– a može stajati i samostalno
.opis {
color:#0000FF;
font-size: 10px;
}
29
• Klasa (ekstenzija selektora) mora se dodijeliti HTML elementu, kao vrijednost atributa class
• <p class=„prvi”>Ovo je prvi paragraf</p>
• <p class=„opis”>Ovo je opis</p>
• U jednom HTML dokumentu više elemenata može imati klasu istog naziva
30
15
28.1.2012.
ID elementi
– jedinstveni identifikator elementa
– U jednom HTML dokumentu smije biti upotrijebljen samo jednom
– Ispred imena ima znak hash #
– #prviParagraf {color:#0000FF;}
– ID se HTML elementu dodjeljuje, kao vrijednost atributa id
– <p id=„prviParagraf”>Ovo je prvi
paragraf</p>
31
Elementi <div> i <span>
• posebni HTML elementi za primjenu stilova
– <div></div> blok element • sadržaj formatira kao zaseban „odlomak” • odvaja ga prijelazom u novi red (funkcionira poput <p> elementa)
– <span></span> linijski element
• koristi se kada želimo posebno formatirati sadržaj unutar nekog drugog elementa
• ne odvaja sadržaj prijelazom u novi red • ne formatira ga kao poseban odlomak
32
16
28.1.2012.
Pseudoklase i pseudoelementi
Pseudoklase
• Služe selektiranju elemenata (ili stanja elemenata) koji se ne nalaze izravno Kao u HTML datoteci, ali ih korisnik može kreirati svojim akcijama.
– pr. element <a>
– pseudoklase: :visited;
:link; :hover; :active
• od selektora elementa odvojene su :
– a:hover
33
Selektori atributa
• Selekcija nekog elementa s obzirom na njegove atribute
• Označavaju se uglatim zagradama [ ] unutar kojih pišemo ime (i vrijednost) nekog atributa
• Elemente možemo selektirati s obzirom na pojedini atribut, ali i s obzirom na vrijednost nekog atributa
• Selekcija elementa s točno određenom vrijednošću nekog atributa: [att=val]
a[title=”web dizajner”]{color:red;}
– Selekcija svih a elemenata s title atributom vrijednosti „web dizajner”
34
17
28.1.2012.
• Koristeći se sintaksom regularnih izraza, mogu se selektirati i posebni slučajevi vrijednosti atributa (npr. atribute koji sadrže, počinju ili završavaju određenim izrazom)
• a[href^=”http:”]{color:red;} (boja vanjskih veza)
• a[rel~=”algebra”]{color:red;} (relationship sadrži riječ algebra)
• a[href$=”.doc”]{color:red;} (veza za word
dokumente)
35
• Oznaka ^ (kapica) ispred jednakosti označava da tekst na početku vrijednosti atributa mora odgovarati tekstu u navodnicima selektora atributa
• Oznaka ~ (tilda, val) ispred jednakosti dohvaća sve elemente koji u vrijednosti atributa imaju više vrijednosti od kojih je jedna jednaka onoj pod navodnicima selektora atributa
• Oznaka $ (dolar) ispred jednakosti služi selekciji elemenata čija vrijednost određenog atributa završava s određenom vrijednošću
36
18
28.1.2012.
Razmještaj elemenata
• Korištenje CSS‐a za kontrolu rasporeda HTML elemenata
• Razmještaj elemenata u dizajnu html dokumenta:
– S obzirom na širinu cjelokupnog dizajna stranice
• Stranice apsolutne širine
• Stranice relativne širine
– S obzirom na broj stupaca
•
•
•
•
S jedim
S dva
Tri
Ili više stupaca
37
• Gradivni elementi layouta su <div> elementi
• <div> element je „omotač” oko nekog sadržaja
• Pokriva 100% maksimalne širine (ako nije drugačije postavljeno)
• Ako se smanji širina, stranica nije centrirana
• margin:auto; ‐ postavlja (izjednačava) lijevu i desnu marginu te stavlja stranicu u sredinu
38
19
28.1.2012.
39
Mockup
• U proizvodnji i dizajnu mockup (ili mock‐up), predstavlja model u stvarnoj ili proporcionalnoj veličini.
• Svrha je demonstracija procesa dizajna, vrednovanje, poučavanje.. 
• Ukoliko mockup pruža barem malo funkcionalnosti sustava, te omogućava testiranje dizajna ‐ prototype
40
20
28.1.2012.
41
• Ukoliko određeni elementi imaju identična svojstva, nije potrebno pisati klasu za svaki od njih, već je te elemente moguće grupirati.
• #header, „nav, #content {
background-color: #efefef;
padding: 10px;
margin-bottom: 10px;
border: solid 1px black;
}
42
21
28.1.2012.
Izrada layouta sa dva stupca
43
• Uz sadržaj, imamo i stupac sa lijeve strane za dodatnu navigaciju ili neke obavjesti
• Ukoliko postoje 2 logičke cjeline (lijevi/desni stupac i sadržaj) nebitno je koja se prvo navodi u HTML‐u, bitan je CSS
• Prilikom računanja širina, paziti na bordere, margine, paddinge obaju okvira
44
22
28.1.2012.
45
Raspad elemenata radi svojstva block za <div> element
Block uvijek zauzima maksimalnu „logičku” širinu
Uvođenje svojstva FLOAT
46
23
28.1.2012.
47
• FLOAT – omogućuje „izdizanje” iz slijeda slaganja i oslobađanje prostora za sljedeći element u strukturi
• Ako se postavi na više elemenata oni se mogu lijepo složiti.
• U primjeru je vidljivo da su se lijevi i desni stupac lijepo složili, no u slobodno prostor podvukao se Footer (podnožje)
• Potrebno je vratiti redosljed slaganja tj. „očistiti” float svojstvo dodavanjem svojstva clear u podnožje
48
24
28.1.2012.
49
ukratko: pozicioniranje elemenata
• određivanje horizontalnog smještaja elementa unutar nadređenog elementa
– float
• vrijednost: left, right, none
• prilikom korištenja pozicioniranja pomoću float, obavezno je navesti širinu elementa (width)
• obavezno „čišćenje” float svojstva: – clear: vrijednost koji „čistimo”
50
25
28.1.2012.
Izrada layouta sa tri stupca
51
52
26
28.1.2012.
Uvod u CSS 3
• Velike promjene u odnosu na ranije inačice
• Neke su podržane, neke će tek biti
• Do potpune specifikacije potrebno je prije svojstva navesti za koje proizvođača (pretražnik) se svojstvo postavlja
• Korištenje specifičnih prefiksa određenog pretražnika (vendor‐specific
extension):
-ms – za Microsoftove pretražnike
-webkit – za Safari i Chrome
-moz – za Firefox
-o – za Operu
• Još nije sasvim preporučljivo
• http://www.css3.info
53
Svojstvo border‐radius
• Zakrivljeni rubovi elemenata, bez korištenja grafičkih elemenata ili korištenja višestrukih div elemenata
• Najavljeno je još 2005. godine
• Još nije u potpunosti podržano
#pero {
border-radius: 20px;
-moz-border-radius: 20px;
}
54
27
28.1.2012.
• Redosljed:
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius,
• Prihvaća 1 ili 2 vrijednosti dužine ili postotka
• Sintaxa:
• border‐*‐*‐radius: [ <length> | <%> ] [ <length> | <%> ]
– border‐top‐left‐radius: 10px 5px;
border‐bottom‐right‐radius: 10% 5%;
border‐top‐right‐radius: 10px;
55
#pero{
height: 5em;
width: 12em;
background-color:red;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
56
28
28.1.2012.
#pero {
height: 65px;
width:160px;
background-color:red;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#pero {
height: 70px;
width: 70px;
background-color:red;
-moz-border-radius: 35px;
border-radius: 35px;
}
57
Svojstvo text‐shadow
• Dodavanje sjene na tekst eliminira potrebu za Photoshopom za ovakve efekte (tj. potrebu za grafičkim rješenjem)
• Sintaksa: –
–
–
–
–
–
text-shadow: X[px] Y[px] R[px] #xxxxxx;
odmak sjene po osi x
odmak sjene po osi y
radijus zamućenja sjene
boja sjene
text-shadow: 5px 5px 5px #FFF;
58
29
28.1.2012.
Svojstvo box‐shadow
• Dodavanje sjene blok elementima HTML‐a
• Sintaksa: – box-shadow: X[px] Y[px] R[px] #xxxxxx;
– odmak sjene po osi x
– odmak sjene po osi y
– radijus zamućenja sjene
– boja sjene
– box-shadow: 10px 10px 5px #888;
59
#left {
width: 200px;
height: 100px;
background-color: #ccc;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;}
#left {
margin:20px;
width: 200px;
height: 100px;
background-color: #ccc;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;}
60
30
28.1.2012.
RGBA boje
• Fleksibilnija manipulacija bojama. Uz ranije postavljanje boje preko rgb kanala rgb(255,0,0), dodano je i slovo a za prozirnost (tj. alfa kanal boje).
• Boje su označene od 0 do 255, a alfa kanal desimalnim brojem od 0 (potpuno prozirno) do 1 (potpuno neprozirno).
• Sintaksa: – background: rgba(xxx, xxx, xxx, 0.x);
61
background:
background:
background:
background:
background:
rgba(255,
rgba(255,
rgba(255,
rgba(255,
rgba(255,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.2);
0.4);
0.6);
0.8);
1) ;
62
31
28.1.2012.
HSLA boje
• Postavljanje boje na temelju parametra nijanse, zasićenosti i svjetline (Hue / Saturation / Lightness), uz dodatni parametar alfa kanal.
• Parametar boje određuje se brojem od 0 do 359, a zasićenost i svjetline postavljaju se postotkom. Alfa kanal se kao i kod rgba načina postavlja decimalnim brojem od 0 do 1.
• Sintaksa: – background: hsla(xxx, xx%, xx%, 0.x);
63
background-color:
background-color:
background-color:
background-color:
background-color:
hsla(0,100%,50%,0.2);
hsla(0,100%,50%,0.4);
hsla(0,100%,50%,0.6);
hsla(0,100%,50%,0.8);
hsla(0,100%,50%,1);
http://en.wikipedia.org/wiki/File:HueScale.svg
64
32
28.1.2012.
Svojstvo font‐face
• Postoji još od CSS2. • Omogućuje korištenje bilo kojeg fonta unutar HTML dokumenta.
• Moguće je koristiti bilo koji TrueType (.ttf) ili OpenType
(.otf) font
• Za korištenje fonta potrebno je svaku verziju koju želimo koristiti (bold, italic, semi‐bold…) definirati svojstvom font‐face, uz navođenje imena i putanje do datoteke željenog fonta. Određivanje putanje zahtijeva da datoteka fonta bude dostupna svim posjetiteljima stranice
• U slučaju potrebe definira se i svojstvo font‐weight
65
@font-face { font-family: Delicious; src:
url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; fontweight: bold; src: url('DeliciousBold.otf'); }
• gornji primjer deklarira font Delicious u Roman i Bold izvedbi, a datoteka fonta nalazi se u istoj mapi kao i CSS datoteka.
• Nakon deklaracije normalno navodimo font
h3 { font-family: Delicious, sans-serif; }
66
33
28.1.2012.
67
Gradijenti
• česta pojava na pozadinama web stranica. Postavljanje grafike s gradijentom, ponavljanje po x ili y osi…
• Prvo podesiti pozadinu za browsere koji ne prikazuju gradijente pozadinske boje, pa postaviti gradijent za ostale:
background:-webkit-gradient(linear, 0 0, 0
100%, from(red), color-stop(20%, yellow),
to(blue));
background:-moz-linear-gradient(top, red,
blue);
• gradient(vrsta gradijenta, početna i krajnja točka gradacije, od boje, dodatna boja color‐stop(duljina, boja), do boje)
68
34
28.1.2012.
Višestruke pozadinske grafike blok el.
• Postavlja više grafičkih elemenata kao pozadinu jednog blok elementa
• Svojstva pojedinih grafika (izvor, položaj i ponavljanj) odvojiti zarezom
background: url(1.png) top center no-repeat,
url(2.png) bottom left no-repeat;
background-image: url(1.png), url(2.png);
background-position: top center, bottom left;
background-repeat: no-repeat;
69
Višestruki stupci u blok elementu
• Ovo svojstvo omogućuje podjelu teksta u nekom blok elementu u više stupaca (kao u tiskanim medijima)
• Sintaksa: –
–
–
–
broj stupaca (column‐count)
širina stupaca (column‐width)
razmak između stupaca (column‐gap)
border između stupaca (column‐rule)
#box{
-webkit-column-count: 5;
-webkit-column-width: 19%%px;
-webkit-column-gap: 1%;
-webkit-column-rule: 1px solid #333;}
70
35
28.1.2012.
71
Transformacija elemenata
• Rotacija: – Svojstvu transform dodaje se vrijednost rotate kojemu se kao parametar prosljeđuje iznos rotacije u stupnjevima
(deg), gradijanima (grad), radijanima (rad) ili broju okretaja
#box {
margin: 25px;
width:75px;
height: 75px;
background‐color: blue;
‐o‐transform:rotate(‐15deg);
‐webkit‐transform:rotate(‐15deg);
‐moz‐transform:rotate(‐15deg);
}
72
36
28.1.2012.
Transformacija elemenata
• Skaliranje: – Omogućava proporcionalno smanjivanje ili povećavanje dimenzija blok elementa
– Svojstvu transform dodaje se vrijednost scale kao decimalni broj (>1 – povećanje; <1 smanjivanje dimenzija)
#box {
margin: 25px;
width:75px;
height: 75px;
background‐color: blue;
‐o‐transform:scale(.4);
‐webkit‐transform:scale(.4);
‐moz‐transform:scale(.4); }
73
SVOJSTVO
IE 8
Firefox 3.6
Chrome 10 i Safari 5
Opera 11
Border‐radius
NE
DA
DA
DA
Text‐shadow
NE
DA
DA
DA
Box‐shadow
NE
DA
DA
DA
RGBA boje
NE
DA
DA
DA
HSLA boje
NE
DA
DA
DA
Font‐face
NE
DA
DA
NE
Gradijenti
NE
DA
DA
NE
Višestruke pozadine
NE
DA
DA
DA
Višestruki stupci
NE
DA
DA
NE
Rotacija elem.
NE
DA
DA
DA
Scale elem.
NE
DA
DA
DA
74
37
Author
Document
Category
Uncategorized
Views
0
File Size
1 208 KB
Tags
1/--pages
Report inappropriate content