Tworzenie gradientu na stronie z pomocą CSS3

Słowo gradient zwykle kojarzy się nam się zwykle z obrazkiem posiadającym bardzo ciekawą kolorystykę np. przechodzącym z jednej barwy w drugą.

Jeszcze niedawno taki efekt graficzny w witrynach internetowych uzyskiwało się z pomocą obrazka w tle. Rewolucja jaką było pojawienie się CSS3 sprawiło, że efekt jest także możliwy z pomocą odpowiednik właściwości CSS. Dzięki czemu możemy tworzyć nie tylko lżejsze strony (grafiki w tle zwykle spowolniają wczytywanie witryn), ale rozbudowywać je o ciekawsze rozwiązania graficzne. Nie potrzebujemy także znać (posiadać) programów graficznych i martwić się że w złe miejsce wrzucimy ilustrację.

Gdzie możemy wykorzystać gradient CSS3

Gradient możemy praktycznie umieścić w takich samych miejscach jak obrazki czyli np. w tle przycisku (button), tle strony internetowej.

Ogranicza nas jedynie wyobraźnia. Wyróżniamy 2 rodzaje gradientu:

Gradient linowy (do dołu/góry/prawo/lewo/na skos) linear-gradient
Gradient kołowy / promienisty (rozchodzący się od środka) radial-gradient

Przykładowe gradienty:

Gradient typu liniowego (linear gradient). Czyli taki, w którym następuje płynne przejście z jednego koloru w drugi z góry na dół. Czasami efekt ten nazywany jest ombre.

#grad {
    background: green; /* For browsers that do not support gradients */    background: -webkit-linear-gradient(green, yellow); /* For Safari 5.1 to 6.0 */    background: -o-linear-gradient(green, yellow); /* For Opera 11.1 to 12.0 */    background: -moz-linear-gradient(green, yellow); /* For Firefox 3.6 to 15 */    background: linear-gradient(green, yellow); /* Standard syntax */}

Gradient typu liniowego od lewej do prawej. Tym razem kolor zmienia się już z boku na bok.

#grad {
  background: green; /* For browsers that do not support gradients */  background: -webkit-linear-gradient(left, green , yellow); /* For Safari 5.1 to 6.0 */  background: -o-linear-gradient(right, green, yellow); /* For Opera 11.1 to 12.0 */  background: -moz-linear-gradient(right, green, yellow); /* For Firefox 3.6 to 15 */  background: linear-gradient(to right, green , yellow); /* Standard syntax */}

Jak widać na powyższych przykładach gradient liniowy zaczyna się od wybranego fragmentu i przechodzi w kolejny.

Gradient na ukos, skos

#grad {
  background: red; /* For browsers that do not support gradients */  background: -webkit-linear-gradient(left top, green, yellow); /* For Safari 5.1 to 6.0 */  background: -o-linear-gradient(bottom right, green, yellow); /* For Opera 11.1 to 12.0 */  background: -moz-linear-gradient(bottom right, green, yellow); /* For Firefox 3.6 to 15 */  background: linear-gradient(to bottom right, green, yellow); /* Standard syntax */}

Gradient liniowy można również obracać w inny sposób. Za kierunek obrotu odpowiedzialna jest wartość deg np:

0deg

90deg

180deg

-90deg

#grad {
    height: 100px;
    background: red; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(0deg, green, yellow); /* For Safari 5.1 to 6.0 */    background: -o-linear-gradient(0deg, green, yellow); /* For Opera 11.1 to 12.0 */    background: -moz-linear-gradient(0deg, green, yellow); /* For Firefox 3.6 to 15 */    background: linear-gradient(0deg, green, yellow); /* Standard syntax (must be last) */}

W przypadku gradientu liniowego nie jesteśmy ograniczeni do konkretnej ilości kolorów. W efekcie możemy stworzyć wielobarwny obiekt np:

#grad {
  background: red; /* For browsers that do not support gradients */  /* For Safari 5.1 to 6.0 */  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Opera 11.1 to 12.0 */  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Fx 3.6 to 15 */  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Standard syntax */  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Do tworzenia gradientów można runiesz wykorzystywać przezroczystość:

#grad {
  background: red; /* For browsers that do not support gradients */  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/}

Możemy również manipulować natężeniem kolorów np:

  background: -webkit-linear-gradient(rgba(255,0,0,0) -20%, rgba(255,0,0,1) 150%); /*Safari 5.1-6*/  background: -o-linear-gradient(rgba(255,0,0,0) -20%, rgba(255,0,0,1) 150%); /*Opera 11.1-12*/  background: -moz-linear-gradient(rgba(255,0,0,0) -20%, rgba(255,0,0,1) 150%); /*Fx 3.6-15*/  background: linear-gradient(rgba(255,0,0,0) -20%, rgba(255,0,0,1) 150%); /*Standard*/

W tym wypadku ten kolor, który ma wyższy % będzie najbardziej widoczny i dominujący.

Gradient może być również samopowtarzalny. Powtarzać go możemy kilkakrotnie:

#grad {
  background: red; /* For browsers that do not support gradients */  /* Safari 5.1 to 6.0 */  background: -webkit-repeating-linear-gradient(green, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */  background: -o-repeating-linear-gradient(green, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */  background: -moz-repeating-linear-gradient(green, yellow 10%, green 20%);
  /* Standard syntax */  background: repeating-linear-gradient(green, yellow 10%, green 20%);
}

Drugim rodzajem gradientu jest gradient promienisty. Tworzy się go od jednego punktu następnie rozciąga się we wszystkie strony tworząc coś w rodzaju elipsy.

Gradient promienisty można z kolei uzyskać:

#grad {
  background: red; /* For browsers that do not support gradients */  background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */  background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */  background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */  background: radial-gradient(red, yellow, green); /* Standard syntax */}

#grad {
  background: red; /* For browsers that do not support gradients */  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */  background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */  background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */}

Oczywiście gradient promienisty nie musi tylko przybierać kszatłu jajka może być również w kształcie koła.

#grad {
  background: red; /* For browsers that do not support gradients */  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */}

Gradient można również wykorzystać do stworzenia szachownicy (kratki) np. czarno białej.

#szachownica{
 background-image:
      -moz-linear-gradient(45deg, #000 25%, transparent 25%), 
      -moz-linear-gradient(-45deg, #000 25%, transparent 25%),
      -moz-linear-gradient(45deg, transparent 75%, #000 75%),
      -moz-linear-gradient(-45deg, transparent 75%, #000 75%);
    background-image:
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #000), color-stop(.25, transparent)), 
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #000), color-stop(.25, transparent)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #000)),
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #000));

    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:100px 101px; /* override value for shitty webkit */    
    background-position:0 0, 50px 0, 50px -50px, 0px 50px;
}

W kodzie CSS wygląda to tak (stworzone przez Shippo)

background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
background-size: 80px 80px;
background-position: 0 0, 40px 40px;
width: 90%;
height: 150px;

Na stronie znajdziecie inne ciekawe przykłady:
http://lea.verou.me/css3patterns/

Obsługa przez Przeglądarki internetowe

Property	Chrome	Edge	IE	Firefox	Safari	Opera
linear-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-