Funkcja CSS radial-gradient()

Funkcja CSS radial-gradient() tworzy gradient promienisty, czyli płynne przejście tonalne między dwoma lub większą liczbą kolorów rozchodzące się promieniście we wszystkich kierunkach od określonego punktu środkowego. Gradienty w CSS są specjalnym rodzajem grafiki, a więc definiujące je funkcje mogą być używane wszędzie tam, gdzie jako wartość jest przyjmowany obraz graficzny, np. we własności background.

Wartości i składnia

Funkcja radial-gradient() ma następującą składnię:

[ [ [ <kształt> || <rozmiar> ]? [ at <położenie> ]? ] || <metoda-interpolacji-kolorów>]? , <lista-punktów-koloru>

Poniżej znajduje się opis poszczególnych elementów tej składni.

Kształt

Gradient promienisty w CSS może mieć kształt koła lub elipsy, za co odpowiadają wartości circle i ellipse parametru kształtu. Domyślna wartość to elipsa. Poniższa przykładowa deklaracja definiuje czerwono-żółty gradient promienisty w kształcie koła:

radial-gradient(circle, red, yellow);

Efekt:

Składnia formalna parametru kształtu:

<kształt> = circle | ellipse

Rozmiar

Rozmiar gradientu promienistego można określić na trzy sposoby: za pomocą słów kluczowych, za pomocą liczby z jednostką długości, lub za pomocą dwóch liczb z jednostką długości albo wartości procentowych. Każdą z nich należy umieścić po słowie kluczowym określającym kształt lub przed nim (jeśli zostało zdefiniowane) i oddzielić od niego spacją.

• Słowa kluczowe – mogą być używane zarówno w przypadku gradientów eliptycznych, jak i kolistych. Dostępne są następujące słowa kluczowe:
  • closest-side: w przypadku gradientów kolistych kształt ostateczny gradientu przyjmuje rozmiar koła o promieniu równym odległości środka gradientu od najbliższego boku obszaru gradientu. W przypadku elipsy promienie mają długości równe długościom najbliższych środkowi gradientu boków w pionie i poziomie. Spójrz na poniższe przykłady.

    Gradient kolisty:

    radial-gradient(circle closest-side, red, yellow);

    Efekt:

    

    Gradient eliptyczny:

    radial-gradient(ellipse closest-side, red, yellow);

    Efekt:

    
  • farthest-side: działa podobnie, jak słowo kluczowe closest-side, tylko odnosi się do najdalszego od środka gradientu boku obszaru gradientu (w przypadku kształtu kolistego) lub najdalszych od środka gradientu boków obszaru gradientu (w przypadku kształtu eliptycznego). Spójrz na poniższy przykład.

    radial-gradient(circle farthest-side, red, yellow);

    Efekt:

    
  • closest-corner: kształt ostateczny gradientu przechodzi przez róg obszaru gradientu, który znajduje się najbliżej środka tego gradientu.
  • farthest-corner: kształt ostateczny gradientu przechodzi przez róg obszaru gradientu, który znajduje się najdalej od środka tego gradientu.
• Jedna liczba z jednostką długości – może być użyta tylko do określenia długości promienia gradientu kolistego.
• Dwie liczby z jednostką długości lub wartości procentowe: ta opcja dotyczy tylko gradientów eliptycznych. Pierwsza z wartości określa długość promienia poziomego, a druga – pionowego. Wartości procentowe odnoszą się do rozmiaru obszaru gradientu w danym kierunku. Uwaga: nie można użyć tylko jednej wartości procentowej.

Składnia formalna parametru rozmiaru:

<rozmiar> = <słowo-kluczowe> | <długość [0,?]> | <długość-procent [0,?]>{2}

<słowo-kluczowe> = closest-corner | closest-side | farthest-corner | farthest-side

Położenie

Parametr położenia określa umiejscowienie środka gradientu. Przyjmuje on takie same wartości, jak własność background-position i jest wprowadzany za pomocą słowa kluczowego at, np.:

radial-gradient(at 340px 150px, yellow, red, green);

Efekt:

Metoda interpolacji kolorów

Za pomocą tego parametru można wybrać przestrzeń kolorów, w której ma być przeprowadzona interpolacja kolorów gradientu. Składa się on ze słowa kluczowego in, po którym należy wpisać nazwę wybranej przestrzeni kolorów, metodę interpolacji barw (dotyczy tylko przestrzeni polarnych) i słowo kluczowe hue, np.:

background: radial-gradient(in hsl longer hue, red, yellow);

Efekt:

Dostępne są dwa rodzaje przestrzeni kolorów: polarne i prostokątne:

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

Dla polarnych przestrzeni kolorów dostępny jest zestaw dodatkowych opcji pozwalających wybrać kierunek wyboru barw z koła barw:

• shorter – interpolacja po krótszym łuku
• longer – interpolacja po dłuższym łuku
• increasing – wybór łuku zgodnie z kierunkiem ruchu wskazówek zegara
• decreasing – wybór łuku przeciwnie do kierunku ruchu wskazówek zegara

Na stronie Gradienty w CSS znajduje się dokładny opis metod interpolacji kolorów.

Definicje formalne:

<metoda-interpolacji-kolorów> = in [ <prostokątna-przestrzeń-barw> | <polarna-przestrzeń-barw> <metoda-interpolacji-barw>? ]

<prostokątna-przestrzeń-barw> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65

<polarna-przestrzeń-barw> = hsl | hwb | lch | oklch

<metoda-interpolacji-barw> = [ shorter | longer | increasing | decreasing ] hue

Lista punktów koloru

Punkty koloru to miejsca na przestrzeni gradientu reprezentujące kolory składające się na ten gradient. Jeśli na przykład gradient promienisty składa się z dwóch kolorów, to ma dwa punkty koloru – jeden na początku promienia gradientu (jest to odpowiednik linii gradientu w gradientach promienistych), a drugi – na jego końcu. Jeśli gradient składa się z pięciu kolorów, to ma pięć punktów koloru.

Dokładny opis punktów koloru znajduje się w sekcji Punkty koloru na stronie Gradienty w CSS. Poniżej natomiast znajduje się szczegółowy opis składni punktów koloru w funkcji CSS radial-gradient().

Najprostsza lista punktów koloru może zawierać tylko dwie definicje kolorów i nic więcej, np.:

radial-gradient(red, green)

Dodatkowo między każdą parą kolorów może znajdować się definicja wskazówki koloru, czyli wartość procentowa lub kątowa, określająca pozycję środka przejścia między tymi dwoma kolorami.

Z kolei sama definicja punktu koloru może zawierać tylko definicję koloru, albo definicję koloru i jedną lub dwie wartości procentowe albo kątowe. Jedna wartość kątowa lub procentowa określa umiejscowienie punktu koloru w konkretnym miejscu obszaru gradientu.

Natomiast dwie wartości kątowe lub procentowe określają rozmiar obszaru, na jakim dany kolor jest jednolity, oraz są równoważne z dwiema definicjami tego samego koloru, np. obie poniższe deklaracje znaczą to samo:

radial-gradient(in hsl, yellow 10%, red 10% 20%, green 20%)
radial-gradient(in hsl, yellow 10%, red 10%, red 20%, green 20%)

Efekt zastosowania tych deklaracji jest następujący:

Składnia formalna listy punktów koloru:

<lista-punktów-koloru> = <punkt-koloru> , [ <wskazówka-koloru>? , <punkt-koloru> ]#

<punkt-koloru> = <kolor> <kąt-punktu-koloru>?

<wskazówka-koloru> = <kąt-procent>

<kąt-punktu-koloru> = <kąt-procent>{1,2}

Podsumowanie składni

Poniżej znajduje się podsumowanie składni funkcji CSS radial-gradient().

[ [ [ <kształt> || <rozmiar> ]? [ at <położenie> ]? ] || <metoda-interpolacji-kolorów>]? , <lista-punktów-koloru>

<kształt> = circle | ellipse

<rozmiar> = <słowo-kluczowe> | <długość [0,?]> | <długość-procent [0,?]>{2}

<słowo-kluczowe> = closest-corner | closest-side | farthest-corner | farthest-side

<metoda-interpolacji-kolorów> = in [ <prostokątna-przestrzeń-barw> | <polarna-przestrzeń-barw> <metoda-interpolacji-barw>? ]

<prostokątna-przestrzeń-barw> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65

<polarna-przestrzeń-barw> = hsl | hwb | lch | oklch

<metoda-interpolacji-barw> = [ shorter | longer | increasing | decreasing ] hue

<lista-punktów-koloru> = <punkt-koloru> , [ <wskazówka-koloru>? , <punkt-koloru> ]#

<punkt-koloru> = <kolor> <kąt-punktu-koloru>?

<wskazówka-koloru> = <kąt-procent>

<kąt-punktu-koloru> = <kąt-procent>{1,2}

Funkcja repeating-radial-gradient()

Funkcja repeating-radial-gradient() ma taką samą składnię, jak funkcja radial-gradient(), ale różni się od niej jednym szczegółem pod względem sposobu działania. Funkcja repeating-radial-gradient() powtarza gradient zdefiniowany między pierwszym i ostatnim punktem koloru tyle razy, ile razy zmieści się on w obszarze gradientu.

Jeśli punkty koloru nie mają określonej długości, to gradient zajmuje całą powierzchnię i wtedy między funkcjami radial-gradient() i repeating-radial-gradient() nie ma różnicy. Działanie funkcji repeating-radial-gradient() staje się widoczne dopiero wtedy, gdy pierwszy i ostatni punkt koloru tworzą obszar o konkretnej szerokości. Spójrz na poniższe przykłady:

radial-gradient(in hsl, yellow, red, green)
repeating-radial-gradient(in hsl, yellow, red, green)

Efekt działania tych dwóch funkcji będzie taki sam. A teraz spójrz na poniższy przykład:

radial-gradient(yellow 20px, red 30px, green 40px);

Ta funkcja ustawia trzy punkty koloru, między którymi tworzy krótkie, 10-pikselowe przejścia tonalne. Ostatni punkt koloru, zielony, rozciąga się jednolicie od 40 piksela do końca. Widać to na tym zrzucie ekranu:

Zmienimy funkcję radial-gradient() na repeating-radial-gradient(), ustawienia pozostawiając niezmienione, i zobaczymy, co się stanie:

repeating-radial-gradient(in hsl, yellow 20px, red 30px, green 40px);

Efekt:

Różnica odległości między pierwszym i ostatnim punktem koloru wynosi 20 pikseli, dlatego funkcja repeating-radial-gradient() powtarza 20-pikselowy obszar gradientu.

Podsumowanie