CSS3 na ofron mundësinë për të krijuar gradient në shfletuesit si Webkit (Chrome, Safari) dhe Firefox! Përdormi i gradentit është vërtet interesant në efektin që krijon. Dhe pse jo shume shfletues e suportoje (shfaqin) këtë opsion, ka shume pozitive. Ja ti shohim së bashku cilat janë.


Gradienti është efekti i marrë nga dy ngjyra të ndryshme, ku të dyja fillojnë në skaje të ndryshme dhe në mes bashkohen duke bërë një ndërthurje të butë midis tyre. Zakonisht preferohen të merren ngjyra me tonalitet të njëjtë. (Blu e hapur me blu e errët) Shikoni shëmbullin më poshtë!

Përdorimi i Gradient në CSS3 është më me leverdi se përdorimi i një IMAZHI Gradient për arsyet si:

  • Shpejtesinë e ngarkimit
  • Më pak kërkesa per http
  • Eshtë i ridimesionueshëm
  • Të jep shumë fleksibilitet

Sintaksa:

Ajo ndryshon nga shfletuesi në shfletues, por W3C e ka vendos:

linear-gradient( [ || ,]? , [, ]* )

radial-gradient( [|| ,]? [|| ,]? , [, ]* )

Për: Mozilla (Firefox)


-moz-linear-gradient( [ || ,]? , [, ]* )

-moz-radial-gradient( [|| ,]? [|| ,]? , [, ]* )

WebKit (Safari, Chrome)


-webkit-gradient(, [, ]?, [, ]? [, ]*)

Një shëmbull me Gradient CSS3:


.header{
background-color:#135c7e;
background-image: -moz-linear-gradient(top, #4eb6e6, #135c7e);
background-image: -webkit-gradient(linear, left top,left bottom, from(#4eb6e6), to(#135c7e));
background-image: linear-gradient(top, #4eb6e6, #135c7e);
}

Vini re se gradientet nuk funksionojne në Internet Explorer, por venia e një background-color:#135c7e; si të paracaktuar nuk do te linte të bardh hapësiren e header.

Nëse kërkoni ndonje sygjerim apo keshille mbi perdorimin e CSS3 mos nguroni te na shkruani në komentet mëposht.

Punë të mbarë!

Stafi i iWeb.al