Gradienty to płynne przejścia tonalne między kolorami. Używa się ich jako dekoracji w różnych miejscach na stronach internetowych, na przykład w tle strony albo jako ozdoba przycisków i innych elementów interfejsu użytkownika. Za ich pomocą można uzyskać wiele ciekawych efektów wizualnych albo całkowicie zepsuć wygląd strony, jeśli się przesadzi…
W CSS są dostępne specjalne funkcje, które umożliwiają dynamiczne generowanie gradientów przez przeglądarkę, dzięki czemu nie trzeba ich tworzyć w programach graficznych, a potem wstawiać na strony w formie obrazków. Funkcji tych można używać wszędzie tam, gdzie mogą być używane obrazy graficzne, a więc na przykład jako wartości własności background-image ustawiającej obraz tła czy własności list-style-image ustawiającej obraz punktora listy. W specyfikacjach CSS typ danych gradientów oznacza się symbolem <gradient> i traktuje się go jako specjalny rodzaj grafiki (pozbawiony jednak wymiarów naturalnych).
W efekcie gradienty podlegają wszystkim własnościom dotyczącym obrazów, takim jak background-attachment, background-clip i wiele innych.
Typy gradientów
W CSS do wyboru są trzy typy gradientów: liniowe, promieniste i stożkowe (nazywane także kątowymi). Najprostszy jest gradient liniowy, który ma postać przejścia tonalnego między kolorami po linii prostej. Gradient promienisty rozchodzi się od punktu centralnego we wszystkie strony, natomiast gradient stożkowy otacza jeden punkt centralny, jakby został namalowany przez wirtualną listwę zaczepioną końcem w tym punkcie.
Jeśli potrzebne jest tylko proste przejście między dwoma lub większą liczbą kolorów, to definicja każdego z dostępnych rodzajów gradientów będzie bardzo prosta i będzie zawierała odpowiednią funkcję z definicjami dwóch kolorów, np. poniżej znajduje się definicja prostego gradientu stożkowego reprezentujące przejście od koloru żółtego do zielonego:
conic-gradient(yellow, green)Jeśli jednak chcemy tworzyć bardziej wyszukane efekty za pomocą tej technologii, na przykład takie jak pokazane w tej galerii gradientów, to musimy poznać ją bardziej dogłębnie i zaprzyjaźnić się z paroma nieskomplikowanymi pojęciami z jej dziedziny, takimi jak punkt koloru czy linia gradientu.
Ponieważ najprostszy jest gradient liniowy, zaczniemy od wprowadzenia do tematu na podstawie tego typu gradientu. Następnie przejdziemy do bardziej zaawansowanych zagadnień, a na koniec przyjrzymy się dwóm pozostałym typom – gradientom promienistym i gradientom stożkowym oraz nauczymy się tworzyć tzw. gradienty powtarzalne.
Gradient liniowy
Gradient liniowy ma postać płynnego przejścia tonalnego między pewną liczbą kolorów po linii prostej. Najprostszy możliwy taki gradient to przejście między dwoma kolorami od góry do dołu. Aby go zdefiniować, wystarczy użyć funkcji linear-gradient i przekazać jej jako wartość dwie definicje kolorów dowolnego typu obsługiwanego w CSS , rozdzielając je przecinkami, np.:
linear-gradient(lightpink, lightgreen);Tę funkcję możemy przekazać jako wartość własności background:
background: linear-gradient(lightpink, lightgreen);Efekt tego działania będzie taki:
Zwiększanie liczby kolorów
Jeśli chcemy stworzyć przejście między większą liczbą kolorów, to wystarczy dodać kolejne kolory po przecinkach. W poniższym przykładzie zostało użytych aż pięć kolorów i w celu pokazania, że można je definiować na różne sposoby, każdy z nich jest określony za pomocą innego typu składni (choć w praktyce lepiej tak nie mieszać).
background: linear-gradient(#fb2003, rgb(251 231 3), lab(87 -78 79), blue, #ec03fb33);Efekt zastosowania tej deklaracji przedstawia poniższy zrzut ekranu.
Wybór kierunku gradientu
Domyślnie gradienty liniowe biegną od góry do dołu, tzn. pierwszy zdefiniowany kolor zaczyna się na górze, po czym stopniowo przechodzi w drugi w kierunku dolnej krawędzi itd., jeśli jest ich więcej. Taki gradient został pokazany w pierwszym przykładzie na tej stronie.
To domyślne ustawienie można zmienić za pomocą słowa kluczowego to, po którym należy wpisać jedno lub dwa kierunkowe słowa kluczowe (top, right, bottom i left), albo za pomocą wartości kątowej (bez słowa kluczowego to).
Pojedyncze kierunkowe słowa kluczowe oznaczają krawędź elementu, w kierunku której ma biec gradient, a więc to bottom oznacza gradient biegnący od góry do dołu, to right – od lewej do prawej, to left – od prawej do lewej, a to top – od dołu do góry, np.:
background: linear-gradient(to right, red, green);Efekt:
Dwa słowa kluczowe wskazują róg, do którego ma biec gradient zaczynający się w przeciwnym rogu. Na przykład wartość to top right oznacza, że gradient będzie zaczynał się w lewym dolnym rogu i będzie biegł do prawego górnego rogu, a wartość to top left – że gradient będzie zaczynał się w dolnym prawym rogu i będzie biegł do górnego lewego rogu itd. Spójrz na poniższy przykład:
background: linear-gradient(to top right, red, green);Efekt:
Zmiana kąta gradientu
Jeśli zakres kontroli nad gradientem, jaki dają słowa kluczowe, jest niewystarczający, to można użyć wartości kątowej, aby precyzyjnie określić jego kąt przebiegu, np.:
background: linear-gradient(210deg, red, green);Efekt:
Wartości kątowych można używać także zamiast słów kluczowych, np. wartości 0deg, 90deg, 180deg i 270deg odpowiadają kolejno wartościom to top, to right, to bottom oraz to left. Ponadto dozwolone jest używanie ujemnych wartości kątowych, np.:
background: linear-gradient(-35deg, red, green);Tyle wiedzy wystarczy, aby tworzyć proste gradienty liniowe. Aby jednak rzeczywiście biegle posługiwać się gradientami, należy znać parę dodatkowych pojęć i parametrów, które są opisane poniżej.
Gradienty dla zaawansowanych
Za pomocą opisanych do tej pory technik można tworzyć tylko proste płynne przejścia tonalne między dowolną liczbą kolorów pod wybranym kątem, ale nie można na przykład utworzyć gradientu, w którym jeden kolor zajmuje 10% powierzchni, a drugi jej 90%. Do tego potrzebne są tzw. punkty koloru. Zanim wyjaśnię czym są punkty koloru i jak ich używać, najpierw przedstawię parę innych ważnych pojęć. Wszystkie opisane w tej części pojęcia dotyczą w równym stopniu każdego typu gradientów.
Obszar gradientu
Gradienty w CSS są traktowane jak obrazy graficzne, tzn. mogą być używane wszędzie tam, gdzie można używać obrazów, ale różnią się od nich jedną ważną cechą – nie mają wymiarów naturalnych. W efekcie o ich rozmiarze decyduje tzw. obszar gradientu (ang. gradient box), czyli obszar elementu, w którym są renderowane.
Przy domyślnych ustawieniach, tzn. jeśli na przykład gradient jest definiowany w tle elementu blokowego i nie zmieniono domyślnej wartości własności background-clip albo background-origin, obszar tego pola zaczyna się w lewym górnym rogu obszaru dopełnienia elementu (zobacz Model polowy CSS) – decyduje o tym domyślne ustawienie własności background-origin, którym jest padding-box. Jeśli się o tym zapomni, to można uzyskać niespodziewany efekt, który staje się dobrze widoczny po zdefiniowaniu szerokiego przerywanego obramowania, np.:
div {
width: 400px;
height: 200px;
border: 15px dotted lightpink;
background: linear-gradient(to right, red, black);
}Teraz elementy div w przeglądarce będą wyglądały tak:
Jeśli chcesz, aby gradient obejmował całe pole obramowania, musisz zmienić ustawienie własności background-origin na border-box:
div {
width: 400px;
height: 200px;
border: 15px dotted lightpink;
background: linear-gradient(to right, red, black);
background-origin: border-box;
}Teraz gradient będzie pokrywał tło elementu pod obramowaniem z każdej strony:
W dalszych przykładach nie pokazuję już własności background-origin, ale w przypadkach, w których jest to istotne, zakładam, że została ona ustawiona na border-box.
Ponadto gradienty podlegają wszystkim pozostałym własnościom działającym na obrazy w tle, takim jak background-clip czy background-size. W efekcie wymiary pola gradientu, a więc też samego gradientu ustawionego w tle elementu, są wypadkową tych wszystkich ustawień.
Jeśli na przykład własności background-clip nadamy wartość content-box, to pole gradientu będzie miało wymiary pola treści elementu, a jeśli za pomocą własności background-size ustawimy wymiary tła na 300 × 500 pikseli, to właśnie takie wymiary będzie miało też pole gradientu, a więc też sam gradient.
Linia gradientu
Gradient jest rysowany w obszarze pola gradientu według tzw. linii gradientu (ang. gradient line), która w zależności od typu gradientu może być też spiralą lub promieniem. W przypadku gradientu liniowego jest ona linią prostą poprowadzoną przez środek pola gradientu i łączącą punkt początkowy (ang. starting point) z punktem końcowym (ang. ending point) odpowiadające pierwszemu i ostatniemu kolorowi gradientu. Gradient liniowy jest rysowany prostopadle do tej linii.
Ta linia może biec pod różnym kątem, w zależności od ustawień zdefiniowanych przez użytkownika. Jeśli na przykład gradient liniowy ma zdefiniowany kierunek to right, to jego linia gradientu łączy środkowy punkt lewej krawędzi ze środkowym punktem prawej krawędzi pola gradientu, jak widać na poniższej ilustracji.
Ustawienie to right jest równoznaczne z ustawieniem 90 stopni (90deg), to bottom – z ustawieniem 180 stopni itd. W przypadku ustawienia to bottom punkty początkowy i końcowy wypadłyby odpowiednio na środku górnej i dolnej krawędzi obszaru gradientu. Podobnie jest z ustawieniami to left i to top – punkty początkowy i końcowy wypadają na środku odpowiednich krawędzi obszaru gradientu.
A teraz spójrz na poniższą definicję gradientu:
div {
width: 400px;
height: 200px;
background: linear-gradient(to top right, lightpink, lightgreen) border-box;
}Ten gradient biegnie od lewego dolnego rogu do prawego górnego rogu i wygląda tak:
Można pomyśleć, że skoro ustawienie to right jest równoznaczne z ustawieniem 90 stopni, to ustawienie to top right powinno być równoznaczne z ustawieniem 45 stopni. Tak jednak nie jest. Gdyby w powyższym przykładzie użyto wartości 45deg zamiast to top right, gradient wyglądałby tak:
Ten gradient jest podobny do poprzedniego, ale nie identyczny z nim. Aby zrozumieć, skąd bierze się ta różnica, należy uświadomić sobie, że gradient liniowy jest rysowany jako seria linii o stopniowo zmieniających się kolorach (od początkowego do końcowego) prostopadłych do linii gradientu, której początek i koniec wyznaczają punkty początkowy i końcowy gradientu.
Punkty początkowy i końcowy gradientu to punkty przecięcia linii gradientu z prostopadłą do niej linią przechodzącą przez wierzchołek pola gradientu znajdujący się w tej samej ćwiartce tego pola. Spójrz na poniższą ilustrację.
Kiedy więc używamy na przykład wartości to top right, to tylko nakazujemy przeglądarce narysować gradient, którego punkt początkowy i końcowy znajdują się odpowiednio w lewym dolnym i prawym górnym rogu pola gradientu.
Jeśli natomiast w gradiencie liniowym używamy wartości kątowej, np. 45deg, 0.25turn, czy 300rad, to określamy kąt między linią gradientu a prostopadłą linią biegnącą przez środek pola gradientu, jak widać na poniższej ilustracji.
Zgodnie z zasadami geometrii kąt 45 stopni będzie równoważny ustawieniu to top right tylko wtedy, gdy pole gradientu będzie kwadratowe. W pozostałych przypadkach będzie jemu bliski, ale nie identyczny z nim.
Punkty koloru
Jak już wiesz, gradient CSS może obejmować dowolną liczbę kolorów. Pierwszy i ostatni pokrywają się ze znanymi Ci już punktami początkowym i końcowym. Między nimi może występować dowolna liczba tzw. punktów koloru (ang. color stop), które określają kolejne „kolorowe przystanki” na drodze gradientu.
Domyślnie przeglądarka dzieli linię gradientu na tyle równych części, ile zostało zdefiniowanych kolorów (minimum dwa), po czym renderuje przejścia tonalne między kolorami według tych obliczeń. Jeśli są tylko dwa kolory, to pierwszy zostaje umieszczony w odległości 0% długości linii gradientu od punktu początkowego, a drugi – w odległości 100% długości linii gradientu od punktu początkowego, czyli w punkcie końcowym. A gdybyśmy zdefiniowali pięć kolorów, to pierwszy znajdowałby się w punkcie 0%, drugi – w punkcie 25%, trzeci – w punkcie 50%, czwarty – w punkcie 75%, a piąty – w punkcie 100%, np.:
linear-gradient(to right, red, green, blue, yellow, orange);Ten gradient w przeglądarce wygląda tak:
W powyższym przykładzie zostały zdefiniowane same kolory, więc przeglądarka automatycznie rozmieściła je równomiernie na linii gradientu. Możliwe jest także samodzielne określenie położenia wszystkich lub wybranych punktów koloru. Można to zrobić przy użyciu liczby z jednostką długości lub wartości procentowej, która odnosi się do długości linii gradientu. W takim przypadku po wybranych punktach koloru należy wstawić spację i dodać odpowiednią wartość, np.:
linear-gradient(to right, green 30%, yellow 40%, orange 50%);Efekt:
Powyższą definicję gradientu można odczytać następująco: „Zacznij od koloru zielonego i utrzymuj go do punktu 30%, od tego miejsca rozpocznij przechodzenie w kolor żółty, który pełnię osiąga w punkcie 40%. Po przekroczeniu punktu 40% zacznij przechodzenie w kolor pomarańczowy, który osiąga pełnię w punkcie 50% i ma być utrzymywany już do końca”.
Pozycje kolorów można określać także za pomocą dwóch wartości i wówczas pierwsza oznacza początek danego koloru, a druga – jego koniec, czyli miejsce, w którym powinno zacząć się przechodzenie w kolejny kolor. To umożliwia uzyskanie jednolitych obszarów koloru za pomocą składni gradientów. Wystarczy tylko początek każdego kolejnego koloru ustawić w tym samym punkcie, co koniec poprzedniego, np.:
linear-gradient(to right, red 10%, green 10% 20%, yellow 20% 30%, orange 30% 40%, blue 40% 50%, pink 50% 60%, brown 60% 70%, grey 70% 80%, navy 80% 90%, purple 90%);Efekt:
Oczywiście powyższy przykład można napisać także przy użyciu składni z pojedynczą wartości określającą pozycję koloru, ale wtedy trzeba by było kolory definiować po dwa razy. Poniższa deklaracja jest równoważna z poprzednią:
linear-gradient(to right, red 0, red 10%, green 10%, green 20%, yellow 20%, yellow 30%, orange 30%, orange 40%, blue 40%, blue 50%, pink 50%, pink 60%, brown 60%, brown 70%, grey 70%, grey 80%, navy 80%, navy 90%, purple 90%, purple 100%);Jeśli któreś z wartości pozycyjnych nie zostaną podane, przeglądarka obliczy je automatycznie.
Wracając do „normalnych” gradientów, CSS daje także kontrolę nad miejscem rozpoczęcia przechodzenia z jednego koloru w inny. Służą do tego tzw. wskazówki kolorów.
Wskazówki kolorów
Wskazówki kolorów (ang. color hint) to liczby z jednostką długości lub wartości procentowe określające położenie punktu środkowego przejścia między kolorami. Wskazówkę taką należy umieścić między tymi kolorami, których ona dotyczy, i oddzielić od nich przecinkami. Najpierw spójrz na przykład bez wskazówek koloru:
div {
width: 600px;
height: 150px;
background: linear-gradient(to right, blue, orange);
}Teraz punkt środkowy przejścia między kolorami niebieskim i pomarańczowym wypada równo na środku obszaru gradientu (w odległości 300 pikseli od jego lewej krawędzi), ponieważ nie zdefiniowano żadnej wskazówki koloru, a linia gradientu pokrywa się z linią łączącą punkty środkowe lewej i prawej krawędzi obszaru gradientu.
Teraz zmienimy deklarację gradientu przez dodanie do niej wskazówki koloru, która przemieści punkt środkowy przejścia między kolorami na miejsce znajdujące się w odległości 500 pikseli od początku linii gradientu (która w tym przypadku pokrywa się z poprowadzoną przez środek obszaru gradientu linią łączącą jego lewą i prawą krawędź).
div {
width: 600px;
height: 150px;
background: linear-gradient(to right, blue, 500px, orange);
}Teraz uzyskujemy następujący efekt:
Wskazówki kolorów można definiować także w bardziej rozbudowanych gradientach, składających się z większej liczby kolorów.
Metody interpolacji kolorów
Składnia gradientów CSS umożliwia także wybór przestrzeni kolorów, w której ma być dokonywana interpolacja kolorów. Aby skorzystać z tej możliwości, należy wpisać słowo kluczowe in, a po nim podać nazwę wybranej przestrzeni barw. Człon ten może znajdować się przed członem określającym kierunek lub za nim i powinien być od niego oddzielony spacją. Oba poniższe przykłady są poprawne i równoznaczne:
linear-gradient(in oklab to right, red, green, blue)
linear-gradient(to right in oklab, red, green, blue)Wyróżnia się dwa rodzaje przestrzeni kolorów: polarne i prostokątne:
- Prostokątne przestrzenie kolorów:
srgb,srgb-linear, lab,oklab,xyz,xyz-d50,xyz-d65 - Polarne przestrzenie kolorów:
hsl,hwb,lch,oklch
W przypadku przestrzeni polarnych dostępne są dodatkowo opcje metody interpolacji barw: shorter, longer, increasing, decreasing. Aby ich użyć, należy podać nazwę wybranej metody i za nią, po spacji, dodać słowo kluczowe hue, np.:
linear-gradient(to right in hsl increasing hue, #ed0202, #03278e, #025a0c, #d9d104);Każda para wartości określających kąty barw na kole barw przestrzeni polarnej odpowiada dwóm promieniom, które „dzielą” koło na dwa łuki. Jeden jest wyznaczony przez te dwa promienie, a drugi powstaje z pozostałej części koła. W związku z tym znaczenie metod interpolacji barw jest następujące:
shorter– interpolacja po krótszym łukulonger– interpolacja po dłuższym łukuincreasing– wybór łuku zgodnie z kierunkiem ruchu wskazówek zegaradecreasing– wybór łuku przeciwnie do kierunku ruchu wskazówek zegara
Najłatwiej jest to zrozumieć na konkretnym przykładzie. Spójrz na poniższą ilustrację przedstawiającą koło barw.
Jeśli przykładowo zdefiniujemy gradient między kolorami czerwonym i żółtym w przestrzeni HSL, to za pomocą promieni obwód powyższego koła podzielimy mniej więcej na takie dwa łuki:
Teraz w zależności od ustawień interpolacji barw możemy uzyskać różne efekty. Jeżeli zastosujemy metodę shorter, to otrzymamy gradient przechodzący od czerwieni, przez kolor pomarańczowy, w kolor żółty (ruch w prawo po krótszym łuku). Jeśli natomiast zastosujemy wartość longer, to otrzymamy gradient przechodzący od koloru czerwonego, przez różowy, niebieski i zielony w żółty (ruch w lewo po dłuższym łuku). Spójrz na poniższe przykłady.
Krótszy łuk:
linear-gradient(to right in hsl shorter hue, red, yellow);Efekt:
Dłuższy łuk:
linear-gradient(to right in hsl longer hue, red, yellow);Efekt:
Dodatkowo należy pamiętać, że kierunek interpolacji barw może być różny w zależności od tego, w którym miejscu na kole wartości znajdują się kolory użyte w definicji gradientu. Jeśli pierwszy kolor w definicji gradientu znajduje się bliżej punktu zerowego (czerwień) niż drugi, to barwy są interpolowane zgodnie z kierunkiem ruchu wskazówek zegara. Jeśli natomiast drugi kolor znajduje się bliżej punktu zerowego, barwy są interpolowane w kierunku przeciwnym do kierunku ruchu wskazówek zegara. Dotyczy to tylko sytuacji, kiedy używana jest metoda interpolacji barw.
Podsumowanie składni gradientu liniowego
Poniżej znajduje się zwięzłe podsumowanie składni gradientu liniowego:
linear-gradient([ [ <kąt> | to <strona-lub-róg> ] || <metoda-interpolacji-kolorów> ]? , <lista-punktów-koloru>)
To znaczy, że funkcja linear-gradient() jako pierwszy argument przyjmuje opcjonalnie wartość określającą kierunek gradientu (może być wyrażona w jednostkach kątowych lub za pomocą kierunkowych słów kluczowych) i metodę interpolacji kolorów. Następnie funkcja przyjmuje listę punktów koloru, która obejmuje opcjonalne wskazówki koloru i wartości określające pozycje kolorów.
Szczegółowy opis składni tej funkcji znajduje się na stronie Funkcja CSS linear-gradient().
Gradient promienisty
Gradient promienisty różni się od gradientu liniowego tylko paroma szczegółami. Przede wszystkim nie biegnie liniowo w jednym kierunku, lecz rozchodzi się promieniście dookoła punktu centralnego. Ponadto w gradiencie promienistym można określić położenie środka oraz są dostępne specjalne opcje pozwalające nadać mu kształt okręgu lub elipsy.
Do tworzenia gradientów promienistych służy funkcja radial-gradient(), która, podobnie jak funkcja linear-gradient(), w najprostszej postaci może przyjmować tylko dwa kolory, np.:
radial-gradient(yellow, green);
Funkcja radial-gradient() ma następującą składnię:
radial-gradient( [ [ [ <kształt> || <rozmiar> ]? [ at <położenie> ]? ] || <metoda-interpolacji-kolorów>]? , <lista-punktów-koloru>)
Poniżej znajduje się zwięzły opis trzech pierwszych parametrów – kształtu, rozmiaru i położenia. Metody interpolacji kolorów i listy punktów koloru zostały już opisane powyżej i nie różnią się pod względem sposobu działania w tym przypadku.
Szczegółowy opis elementów składni funkcji radial-gradient() znajduje się na stronie Funkcja CSS radial-gradient()().
Określanie kształtu
Gradient promienisty może mieć kształt koła lub elipsy, za co odpowiadają wartości circle i ellipse. Domyślna wartość to ellipse i przykład jej działania widać na powyższej ilustracji. Natomiast poniżej znajduje się przykład gradientu w kształcie koła:
Określanie rozmiaru
Rozmiar gradientu promienistego można określić na trzy sposoby: za pomocą słów kluczowych i liczby z jednostką długości (w przypadku obu kształtów) oraz za pomocą liczb z jednostką długości i wartości procentowych (w przypadku elipsy).
Dostępne słowa kluczowe to: closest-side, closest-corner, farthest-side i farthest-corner. Ich szczegółowy opis znajduje się na stronie Funkcja CSS radial-gradient().
Poniżej znajduje się przykład ustawienia dokładnej długości promienia gradientu w kształcie koła:
radial-gradient(circle 25px, yellow, green);Efekt:
Określanie położenia środka
Domyślnie środek gradientu promienistego zostaje umieszczony na samym środku obszar gradientu, ale można to zmienić. W tym celu należy użyć słowa kluczowego at i wpisać po nim wartość określającą położenie punktu centralnego. Ta składnia obsługuje takie same wartości, jak własność background-position, np.:
radial-gradient(circle 45px at 290px 140px, yellow, green);Efekt:
Gradient stożkowy
Gradient stożkowy to płynne przejście tonalne między kolorami „namalowane” przez „wirtualną prowadnicę” obracającą się wokół punktu centralnego, jak wskazówka wokół środka tarczy zegara. Przykładem takiego gradientu jest pokazane wcześniej koło barw.
Do tworzenia gradientów stożkowych służy funkcja conic-gradient(), która podobnie jak funkcje linear-gradient() i radial-gradient(), w najprostszej postaci może przyjmować tylko dwie wartości kolorów, np.:
conic-gradient(red, blue)Efekt:
Funkcja conic-gradient() ma następującą składnię:
[ [ [ from <kąt> ]? [ at <położenie> ]? ] || <metoda-interpolacji-kolorów> ]? , <lista-punktów-koloru>
Parametr kąt powinien być poprzedzony słowem kluczowym from i może być wartością kątową. Określa on początkowy kąt gradientu w kierunku zgodnym z kierunkiem ruchu wskazówek zegara, np.:
conic-gradient(from 90deg, red, blue)Efekt:
Położenie określa się tak samo, jak w gradiencie promienistym, czyli przez wpisanie słowa kluczowego at i takiej samej wartości, jakie przyjmuje własność background-position.
Szczegółowy opis składni funkcji conic-gradient() znajduje się na stronie Funkcja CSS conic-gradient().
Różnica między gradientem promienistym a gradientem stożkowym
Gradient promienisty rozchodzi się we wszystkich kierunkach od punktu środkowego, a gradient stożkowy „otacza” punkt środkowy tak, jakby został namalowany przez wirtualną listwę, która została przymocowana końcem do tego punktu i obrócona wokół niego. Poniższa ilustracja dokładnie pokazuje tę różnicę.
Gradienty powtarzalne
Wszystkie trzy opisane powyżej funkcje występują także w wersji powtarzalnej, czyli takiej, która rysuje zdefiniowany gradient nie raz, a wiele razy w obrębie obszaru gradientu. Za ich pomocą można uzyskać wiele ciekawych efektów wizualnych. Oto te funkcje:
repeating-linear-gradient()– powtarzalny gradient liniowyrepeating-radial-gradient()– powtarzalny gradient promienistyrepeating-conic-gradient– powtarzalny gradient stożkowy
Składnia tych funkcji jest taka sama, jak ich „normalnych” odpowiedników, ale różnią się one od nich jednym szczegółem w sposobie działania. W gradientach powtarzalnych szerokość powielanego obszaru jest równa odległości między pierwszym i ostatnim punktem koloru, np.:
div {
width: 480px;
height: 200px;
background: repeating-linear-gradient(to right, red 0 40px, green 40px 80px, blue 80px 120px);
}W tym przykładzie odległość między pierwszym a ostatnim punktem koloru wynosi 120 pikseli (120 px – 0 = 120 px), a szerokość elementu została ustawiona na 480 pikseli, w związku z czym powinniśmy otrzymać cztery grupy trójkolorowych pasów (480 : 120 = 4). Poniższy zrzut ekranu stanowi dowód, że rzeczywiście tak się stało:
Analogicznie można tworzyć gradienty promieniste i stożkowe. Spójrz na poniższą przykładową definicję gradientu stożkowego:
repeating-conic-gradient(red 0 20deg, green 20deg 40deg, orange 40deg 60deg)Pełny obrót gradientu stożkowego ma 360 stopni, a odległość między pierwszym i ostatnim punktem koloru w przykładzie wynosi 60 stopni, więc powinniśmy otrzymać sześć grup po trzy kolorowe pasy:
Gradienty w CSS to bardzo elastyczna technologia, która pozwala uzyskać wiele atrakcyjnych efektów wizualnych bez używania obrazów graficznych. Choć utworzenie prostego gradientu dowolnego typu jest bardzo proste, to uzyskanie bardziej zaawansowanych efektów wymaga już więcej pracy. Powodzenia!