CSS 3

CSS3 je serija modula dizajniranih kako bi bili implementirani odvojeno i međusobno neovisno. W3C je nakon objave takvog pristupa priložio objašnjenje da je lakše i efikasnije raditi na manjim dijelovima te ih s vremenom ažurirati nego raditi na velikom dijelu kôda te ga tek onda službeno predstaviti.

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.

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

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.

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

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: slika za obrub

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
Svojstvo box-shadow omogućuje dodavanje sjene na bilo koji element.

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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).

Prvi
Drugi
Treći
Četvrti
Peti

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.

HSLA koristi nijanse, zasićenost te svjetlinu (parametri hue, saturation/lightness) uz dodatni parametar alfa kanala.

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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.

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

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

Text wrap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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

Ovo je Div element.
Ovo je Div element.

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

Rotate Y

Ovo je Div element.
Ovo je Div element.

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

Scale

Ovo je Div element.

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

Skew

Ovo je Div element.
Ovo je Div element.

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

Matrix

Ovo je Div element.
Ovo je Div element.

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);
}

div{
transition:width 2s;
-webkit-transition:width 2s;
}