Gradient z wykorzystaniem CSS3 jako tło strony

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

Jeszcze niedawno taki efekt graficzny można było uzyskać tylko z pomocą obrazka. Rewolucja jaką było pojawienie się CSS3 umożliwiła nam uzyskanie dokładni takich samych efektów. Dzięki czemu możemy tworzyć nie tylko lżejsze strony, 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:

#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

Generatory gradientu

Źródło: http://www.w3schools.com/css/css3_gradients.asp

Aurelia Sypniewska

W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.