U ovome tutorijalu je prikazano kako se korištenjem CSS3 mogu postići gotovo identični rezultati kao kod grafičkog dizajna objekata na web stranici korištenjem alata za grafički dizajn, recimo Photoshopa. Pri  tome su korišteni neki noviteti predstavljeni u CSS3 standardu: gradient tool, border radius, box shadow, te iz CSS2 standarda text shadow.

U nastavku je dan kod:

Napomena: U danom primjeru kod je prilagođen za Mozilla Firefox pretraživač (korištene naredbe s prefixom moz- ), no veoma se lagano prilagodi i za ostale (IE,Chrome,Safari,itd..).

[Index.html]

<link rel="stylesheet" type="text/css" href="stil.css"/><a href="#"> <p>Pritisni</p> <div></div> <div></div> <div></div> </a>

[Stil.css]

a,div,p{ margin:0; padding:0; display:block; } a{ position:relative; width:172px; text-decoration:none; border:1px solid #1c1966; -moz-border-radius:6px; -moz-box-shadow:0px 3px 5px #222; } div{ height:30px; width:170px; border:1px solid #6291c9; } p{ width:172px; text-align:center; position:absolute; padding-top:10%; font-family:arial,sans-serif; font-size:22px; font-weight:bold; color:#eee; text-shadow:#222 1px 1px 1px; } #gornji{ background-color:#76b9ee; background-image:-moz-linear-gradient(-90deg,#e3edf6,#2494e0); -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-bottom:none; } #donji{ background-color:#0a6ab7;/ background-image:-moz-linear-gradient(-90deg,#0a6ab7,#014fb1); -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; border-top:none; } #maska{ position:absolute; width:172px; height:62px; visibility:hidden; top:-1px; left:-1px; } a:hover #maska{ visibility:visible; background-image:-moz-linear-gradient(-90deg,#333,#000); opacity:0.3; -moz-border-radius:5px; } a:hover {-moz-box-shadow:0px 2px 3px #777;}

Kada pokrenemo Index.html u Firefoxu (mora podržavati CSS3!) dobijemo:

U nastavku su prikazane korištene naredbe i njihova sintaksa:

1.       Naredba gradient dolazi uz atribut background-image i ima sintaksu:

Mozilla (Firefox):

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

 Gdje je :

<point>

Položaj koji određuje polaznu točku gradijenta(u postotcima, pikselima ili korištenjem naredbi „left“, „center“,“right“ za horizontalno pozicioniranje odnosno „top“, “center“, “bottom“ za vertikalno pozicioniranje). Pologradižaj se određuje u odnosu na gornji lijevi ugao elementa kojem se definira gradijent.

<angle>

Kut smjera širenja gradijenta.

<stop>

Opisan je sa  <color> [ <percentage> |  <length> ].  Sastoji se od vrijednosti boje <color> te opcionalno položaja prestanka boje (u postotcima ili duljine duž osi širenja gradijenta).

Za detalje pogledajte : https://developer.mozilla.org/en/CSS/-moz-linear-gradient.

Gradijent se može širiti i radijalno korištenjem naredbe  -moz-radial-gradient (detaljnije : https://developer.mozilla.org/en/CSS/-moz-radial-gradient).

U ostalim pretraživačima sintaksa je sljedeća:

WebKit (Chrome, Safari):

  -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]?[, <stop>]*)

Detaljnije: http://www.webkit.org/blog/175/introducing-css-gradients/.

Trident(IE):

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1471da,
endColorstr=#1C85FB);

ili

-ms-filter:”progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB)”;

Napomena: Kod korištenja atributa background-image naredba za filter se ignorira(premošćava) tako da nema efekta korištenja filtera u toj kombinaciji.

Detaljnije: http://msdn.microsoft.com/en-us/library/ms532997%28VS.85,loband%29.aspx.

2.       Naredba box-shadow  se koristi za dodavanje sjene objektu – može se definirati sjena u x i y smjeru zasebno, boja, oštrina i dubina (debljina) sjene. Također se može dodavanjem naredbe inset sjena usmjeriti prema unutrašnjosti objekta i time stvoriti dojam unutarnjeg sjaja.

Sintaksa naredbe:

*-box-shadow: none | <shadow> [ , <shadow> ]*

 <shadow> = inset? && [ <length>{2,4} && <color>? ]

U Webkit i Mozilla preglednicima se navedenoj sintaksi dodaje prefiks  -moz- ili –webkit-, za Trident(IE)  nema prefiksa; ostatak sintakse je isti.

Za više informacija pogledajte link: http://www.css3.info/preview/box-shadow/.

3.      Naredba border-radius ima sintaksu:

*-border-*-*-radius || *-border-radius-*: [ <length> | <%> ] [ <length> | <%> ]?

Prvi izraz se koristi kod Webkit engina (npr. –webkit-border-top-left-radius) ili IE (border-bottom-right-radius), a drugi kod Mozilla engina( npr. –moz-border-radius-topright). Oba argumenta mogu biti izražena ili u pikselima ili u postotcima dimenzije elementa kojem definiramo radijus. Prvi argument predstavlja radijus zakrivljenosti ugla u horizontalnom smjeru, a drugi u vertikalnom smjeru.

Više informacije na linku: http://www.css3.info/preview/rounded-border/.

4.     Text shadow se veoma često koristi u tipografiji i predstavljan je već u CSS2 standardu.

text-shadow: none | [<shadow>,]* <shadow>

   Gdje je  <shadow> definiran sa: 

[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

Za više informacija pogledajte: http://www.css3.info/preview/text-shadow/.

Zaključak:

Iako se još uvijek CSS3 ne može nositi sa svim mogućnostima Photoshopa (i srodnih mu alata) glavna prednost mu je što zauzima manje memorije – prostora na serveru i time znači brže učitavanja i izvršavanje stranice. U ovom našem primjeru to je negdje desetak puta manje (18kB slika gumba, naspram 1.5kB  kod). Također CSS omogućava i dinamičko prilagođavanje sadržaju (npr. gradijent se prilagođava veličini <div>-a ili sjena promijenjenom sadržaju teksta).