Uvod

Verzija CSS3 donosi mnoge novosti u svakom dijelu dizajna, jedna od njih je definitivno eliminiranje prijašnjih gomila kôda da bi se postigao jednostavan efekt poput zaobljenih rubova.

Budući da su danas mobilni web preglednici jedan od najšire rasprostranjenih pristupa web-u, CSS3 je s modulom media-query omogućio prilagođavanje elementa (ili cijele stranice) širini tj. rezoluciji ekrana. Sve novije stranice koriste takav pristup, dok starije prolaze kroz nadogradnje i prilagodbe. Takva vrsta izrade stranica se zove Responsive Web Design, a za njenog začetnika se smatra upravo CSS3.

Još jedna od stvari koje vrijedi napomenuti je ta da je CSS 3 izbacio Flash tehnologiju kod izrade animacija. Sama flash tehnologija je bila spora, podržana od samo par preglednika i loša za optimizaciju stranica. Dok je CSS3 „zakrpao“ sve te loše strane te je još dodatno olakšao izradu animacija.

Sintaksa

CSS3 nije uveo nikakve nove sintaktičke promjene, niti promjene načina korištenja. Samo upisivanje novih svojstava i njihovih vrijednosti na standardni način "poziva" nove mogućnosti. Upravo to je jedna od velikih prednosti.

Novi moduli

Budući da je cijela ideja izrade CSS3 podjela na module radi lakšeg održavanja i ažuriranja , novonastali i dorađeni moduli su :

• selektori
• model kutije
• pozadina i obrubi
• tekstualni efekti
• 2D i 3D transformacije
• animacije

Nova svojstva

Neki od novih svojstva su:

• border-image- omogućuje korištenje slike kao obruba
• border-radius- omogućuje korištenje zaobljenih rubova
• transform- uz pripisano dodatno svojstvo poput rotate ili translate omogućuje transformiranje elementa
• linear-gradient- omogućuje korištenje gradijenta
• text-shadow- omogućuje korištenje sjene na slovima
• word-wrap- omogućuje da se dugačke riječi prelome u novi red

Oznake preglednika

Unutar CSS3 postoje oznake koje označavaju proizvođača preglednika te na taj način omogućuju svojstvima da se prikazuju jednako u svakom pregledniku. Neke od oznaka:

• -khtml- Konqueror(Linux)
• -rim- RIM(Blackberry)
• -ms- Microsoft
• -o- Opera
• -moz- Mozilla (Firefox)
• -webkit- Webkit (Safari i chrome)

Važno je istaknuti da se te oznake pišu uz određeno svojstvo na sljedeći način:

background: -moz-linear-gradient(rgb(250, 20, 20));
background: -webkit-linear-gradient(rgb(250, 20, 20));
background: -o-linear-gradient(rgb(250, 20, 20));
background: -ms-linear-gradient(rgb(250, 20, 20));
background: linear-gradient(rgb(250, 20, 20));

Tim načinom su "pokriveni" svi česti proizvođači što znači da bi svojstvo trebalo biti prikazano jednakou svakome pregledniku

Zaobljeni rubovi

Jedna od novih svojstava koji se mogu koristiti unutar CSS3 je zaobljenje rubova okvira elemenata.

div{
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}

Ukoliko se želi primijeniti zakrivljenost obruba na svakom kutu pojedinačno to se može napraviti na sljedeći način.

div{
border-radius: 5px 10px 30px 50px;
-webkit-border-radius: 5px 10px 30px 50px;
-moz-border-radius: 5px 10px 30px 50px;
-ms-border-radius: 5px 10px 30px 50px;
-o-border-radius: 5px 10px 30px 50px;
}

Obrub od slika

Budući da forme koje se nalaze na web-u često traže unos imena, telefonskog broja čak i poruke, koriste se polja za unos radi lakše validacije. Unaprijed se može odrediti za što je predviđeno određeno polje. Tako naprimjer možete kod unosa zaporke "maskirati" unesene znakove.

Svojstvo border-radius omogućuje dodavanje zaobljenih rubova na bilo koji element.

Orginalna slika:

div{
border-style: solid;
border-width: 26px 39px 27px;
border-image: url(img/obrub.png) 26 25 27 27 fill repeat;
-webkit-border-image: url(img/obrub.png) 26 25 27 27 repeat;
-moz-border-image: url(img/obrub.png) 26 25 27 27 repeat;
-o-border-image: url(img/obrub.png) 26 25 27 27 repeat;
}

Sjena elementa

Svojstvo box-shadow omogućuje primjenu sjene na element.Kako bi se moglo koristiti box-shadow potrebno je postaviti vrijednosti:

• odmak sjene po x osi,
• odmak sjene po y osi,
• radijus zamućenosti sjene
• boju sjene

div{
border-radius: 5px 10px 30px 50px;
-webkit-border-radius: 5px 10px 30px 50px;
-moz-border-radius: 5px 10px 30px 50px;
-ms-border-radius: 5px 10px 30px 50px;
-o-border-radius: 5px 10px 30px 50px;
}

Pozadinske slike

div{
background:url(img/obrub.png);
background-size:100% 100%;
background-repeat:no-repeat;
}

Gradijent

div{
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}

RGBA

Do pojave CSS3 sustav boja koji se koristio u web dizajnu je RGB no u novoj verziji moguće je koristiti i RGBA sustav boja. RGBA je sustav koji uz RGB boje koristi i alfa kanal koji služi za transparentnost. Vrijednost rgb boja je od 0 do 255 dok je vrijednost alfa kanala od 0 (potpuno prozirno ) do 1(potpuno neprozirno).

div{
background-color: rgba(0,0,255,0);
}
div{
background-color: rgba(0,0,255,0.25);
}
div{
background-color: rgba(0,0,255,0.5);
}
div{
background-color: rgba(0,0,255,0.75);
}
div{
background-color: rgba(0,0,255,1);
}

HSLA

Još jedna novost uz RGBA postavljanja boja je HSLA način postavljanja boja. HSLA koristi nijanse, zasićenost te svjetlinu (parametri hue, saturation/lightness) uz dodatni parametar alfa kanala. Parametar boje se određuje broje od 0 do 359, dok zasićenost i svjetlina koristi postotak od 0 do 100. Alfa kanal kao i kod RGBA se postavlja kao decimalni broj u rasponu o 0 do 1.

div{
background: hsla(150, 25%, 25%, 0.7);
}

Sjene teksta

Koristeći svojstvo text-shadow moguće je postaviti sjenu ispod teksta te na taj način dobiti izgled elementa kao da je korištena slika. Korištenjem slike povećava se veličina stranice a samim time i povećava vrijeme učitavanja stranice. Kako bi se moglo koristiti text-shadow potrebno je postaviti vrijednosti:

• odmak sjene po x osi,
• odmak sjene po y osi,
• radijus zamućenosti sjene
• boju sjene

div{
text-shadow: 3px 3px 10px #000000;
}

Fontovi

Svojstvo font-face je predstavljeno još u verziji 2 no unutar CSS3 donosi niz mogućnosti. Koristeći ovo svojstvo omogućeno je uključivanje vlastitog fonta unutar web stranice što predstavlja velike mogućnosti. Podržani formati za fontove su EOT (Embedded Open Type), TTF (True Type), OTF(Open Type), WOFF (Web Open Font Format) i SVG (Scalable Vector Graphics). Svaki font koji se želi uključiti u web stranicu mora imati se deklarirati svojstvom @font-face. Kako bi se mogao deklarirati font potrebno je navesti ime i putanju do datoteke željenog fonta. Putanja datoteke mora biti vidljiva svim stranicama koje žele koristi novi font.

@font-face {
font-family: 'Arbutus', cursive;
src: url('http://fonts.googleapis.com/css?family=Arbutus');
}

div{
font-family: 'Arbutus', cursive;
}

Text wrap

div{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}

Translate

div{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px);
-webkit-transform:translate(50px,100px);
}

Rotate

div{
width:200px;
height:100px;
background-color:yellow;
transform:rotate(30deg);
}

Rotate X

div{
transform:rotateX(120deg);
-ms-transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);
}

Rotate Y

div{
transform:rotateY(120deg);
-ms-transform:rotateY(120deg);
-webkit-transform:rotateY(120deg);
}

Scale

div{
transform:scale(0,5);
-ms-transform:scale(0,5);
-webkit-transform:scale(0,5);
}

Skew

div{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
}

Matrix

div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}