Web dizajn trikovi – prvi deo

Čitate prvi deo serijala u kome ćemo se okrenuti isključivo web dizajnu i novim tehnologijama. U pitanju su CSS 3 i HTML 5. Naučićemo vas nekim trikovima i pomoći vam da uradite svoj sajt na što savremeniji način.

Za ovaj prvi deo našeg serijala izabrali smo CSS 3 i novu mogućnost gde možete praviti Background Gradient odnosno izabrati nekoliko boja koje će se smenjivati i na taj način praviti pozadinu nekog elementa na vašem sajtu.

Background Gradient se najčešće koristi da bi se napravila boja pozadine sajta, ali web dizajneri sve više dodaju ovu mogućnost i ostalim elementima na sajtu poput pozadine naslova, footer-a, čak i pozadine na brojaču poseta.  Background Gradient je takođe jako popularan i na Android aplikacijama.

Najveća greška Background Gradient-a jeste što za svaki browser morate da pišete poseban kod.  Zato hajde da pogledamo primere:

Chrome i Safari

Kod ovih browser-a vi zadajete tip, koordinate uglova gradijenta i color-stop, a sve počinje sa -webkit-gradient

Tipovi su:

  • linear – gradijent se iscrtava linearno
  • radial –  gradijent se iscrtava kružno

Koordinate:

Za koridinate unosite gde će početi gradijent. Možete staviti za prvu left top, a za drugu left bottom i na taj način će vaš gradijent ići od vrha elementa do dna.

Color-stop je zapravo mesto gde će se promeniti boja gradijenta.

background: -webkit-gradient(

  linear,

  left top,

  left bottom,

  color-stop(0,#FFF),

  color-stop(1, #000),

  );

Svi ostali browser-i kao i novije verzije Chrome-a

Kod  verzija Chrome-a od verzije 11 pa na dalje ovo je još jednostavnije i vi navodite tip još u delu –webkit-gradient, pa bi za linearan tip bilo –webkit-linear-gradient, a za radial –webkit-radial-gradient. Kod koda za Mozilla Firefox umesto –webkit pisaćete –moz, a sve ostalo ostaje isto.  Ista stvar je i sa Opera browser-om gde umesto –webkit pisete –o. Gradijent je čak moguć i sa Internet Explorer-om i postoji skraćenica –ms.

Od stvari koje su pojednostavljene tu je i color- koji ne morate pisati u zagradama  što možete videti u sledećem primeru:

Chrome 11+

background: -webkit-linear-gradient(

  top,

  #FFF 0%,

  #000 100%

  );

Firefox

background: -moz-linear-gradient(

  top,

  #FFF 0%,

  #000 100%

  );

Opera

background: -o-linear-gradient(

  top,

  #FFF 0%,

  #000 100%

  );

IE 10

background: -ms-linear-gradient(

  top,

  #FFF 0%,

  #000 100%

  );

Problem sa Internet Explorer-om

Background Gradient radi samo u verziji 10 i u ostalim verzijama ovaj kod neće ništa značiti zato obratite pažnju da za starije verzije ovog browser-a napravite adekvatnu zamenu. Možete to uraditi pravljenjem slike koja će biti gradient.

Možete jednostavno slikati ekran na kome je sajt sa gradijentom. Zatim iseći deo slike gde je gradijent i u CSS-u postaviti to kao sliku pozadine.

background-image: url(‘slika.jpg’);

background-repeat: repeat-xy;

Vaš konačan gradijent izgledao bi ovako:

Za one kojima je kod suviše komplikovan, tu je i jednostavnije rešenje. Postoji  niz sajtova koji prave za vas gradijent a vi samo unosite boje koje su vam potrebne i tipove gradijenta.  Možda je najbolji sajt za pravljenje ovoga upravo sajt dodatka Colorzilla o kome smo pisali ovde, a sekciju sa pravljem gradijenta možete naći na adresi: http://www.colorzilla.com/gradient-editor/.

Postoji još jedan dobar sajt koji je malo jednostavniji za korišćenje i ima sve što vam treba i možete ga naći ovde.

 

Inspiracija – izvori:

http://visualstudiomagazine.com

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

http://www.colorzilla.com/gradient-editor/.

Tags: 
Aktuelan: