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
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- |
Źródło: http://www.w3schools.com/css/css3_gradients.asp
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ą.