Przyszła pora na zapoznanie się z gradientami, czyli płynnym przejściem z jednego koloru w drugi.Warto wspomnieć że każda przeglądarka potrzebuje dodatkowo odpowiedniego przedrostka w kodzie, aby gradient zadziałał.

Przedrostki

-webkit- dla chrome i safarii

-o- dla opery

-moz- dla firefoxa

-ms- dla internet explorer

Same gradienty możemy podzielić na dwa rodzaje: liniowy(linear) i promienisty(radial).

Gradient liniowy

Gradient liniowy tworzymy dzięki znacznikowi linear-gradient().Poprzedzony jest przedrostkiem dla przeglądarki, a w nawiasach umieszczamy parametry gradientu.Pierwszy parametr określa miejsce z którego zacznie gradient. Kolejne to kolory i odległości od końca gradientu w których mają zostać osiągnięte.

Tak wygląda kod poniższego gradientu:

(powtórzony cztery razy, aby działał dla każdej przegladarki)

			
	background:-webkit-linear-gradient(top,blue 3%,red 50%,green);
	background:-o-linear-gradient(top,blue 3%,red 50%,green);
	background:-moz-linear-gradient(top,blue 3%,red 50%,green);
	background:-ms-linear-gradient(top,blue 3%,red 50%;green);

Gradient promienisty

Gradient promienisty tworzymy dzięki znacznikowi radial-gradient().Działa na podobnej zasadzie jak liniowy, tylko jego początek jest w środku i rozchodzi się po okręgu.Standardowo tworzony na bazie elipsy, lecz po dodaniu parametry circle zmienia się w koło.

Tak wygląda kod poniższego gradientu:

(powtórzony cztery razy, aby działał dla każdej przegladarki)

			
	background:-webkit-radial-gradient(circle,blue 3%,red 50%,green);
	background:-o-radial-gradient(circle,blue 3%,red 50%,green);
	background:-moz-radial-gradient(circle,blue 3%,red 50%,green);
	background:-ms-radial-gradient(circle,blue 3%,red 50%;green);