Gradienty

Gradienty to świetny sposób aby nieco urozmaicić wygląd naszej strony

Uzycie gradientów na naszej stronie wiąże się jednak z zapamiętaniem przedrostków które wymagają przeglądarki aby gradienty działały poprawnie. Niestety, wymaga to też od nas pisania każdego kodu nie raz, nie dwa, a cztery razy. Ale nie należy się tym zrażać, przecież czego to sie nie robi aby nasza strona wyglądała nieco przyjemniej dla oka! Tak więc bez dłuższego zwlekania zaczynajmy:

Najpierw zacznijmy od tych przedrostków, mają one następującą konstrukcję dla konkretnych przeglądarek:

  • -webkit- dla chrome i safari
  • -moz- dla firefoxa
  • -o- dla opery
  • -ms- dla internet explorer

Gradienty możemy podzielić na dwa: linearny oraz promienisty czyli inaczej okrągły. Zaczniemy od linearnego. Tak więc żeby skorzystać z gradientu należy w CSS danego elementu dodać kod: 

		div {
			background: -moz-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
			background: -o-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
			background: -ms-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
			background: -webkit-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
		}

Przedstawimy teraz na prostym przykładzie wszystkie kierunki gradientów:

-linear-gradient(to right, gray, white)
-linear-gradient(to top right, gray, white)
-linear-gradient(to top, gray, white)
-linear-gradient(to bottom right, gray, white)
-linear-gradient(to bottom, gray, white)

Analogicznie działa to dla left zamiast right. Oczywiście nasz gradient może zawierać więcej niż jeden kolor, wtedy jego kod wygląda tak: 

		-przedrostek-linear-gradient(kierunek, kolor1, kolor2, kolor3);

Można również zabawić sie odległościami danego koloru: 

		-przedrostek-linear-gradient(kierunek, kolor1 odległość, kolor2 odległość, kolor3 odległość);
-linear-gradient(to right, #6ba3ff 10%, #72dd54 30%, white 50%);

Sprawa z gradientem promienistym ma się bardzo podobnie jedynie zamist słówka kluczowego linear używamy słowa radial oto parę przykładów:

-radial-gradient(silver, white);
-radial-gradient(#6ba3ff, #72dd54, white);