Funkcja CSS conic-gradient()

Funkcja CSS conic-gradient() tworzy gradient stożkowy, który ma postać koła utworzonego poprzez obrót promienia wokół punktu centralnego, w sposób analogiczny do tego, jak wskazówka zegara obraca się wokół tarczy. Punkty koloru tego typu gradientu są rozmieszczone na obwodzie tego koła.

Wartości i składnia

Definicja gradientu stożkowego składa się z definicji punktu środkowego, kąta obrotu i listy punktów koloru. Poniżej jest przedstawiona składnia funkcji conic-gradient() tworzącej gradient stożkowy:

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

Kąt

Ten parametr określa kąt początkowy gradientu. Domyślna wartość, stosowana w przypadku, gdy ten parametr nie jest zdefiniowany, wynosi 0deg, np.:

conic-gradient(red, yellow)

Efekt:

Aby zmienić kąt początkowy gradientu stożkowego, należy wpisać słowo kluczowe from, a po nim podać kąt, np.:

conic-gradient(from 0.35turn, red, yellow)

Kąt tego gradientu został ustawiony na 0,35 obrotu, dzięki czemu wygląda on tak:

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.:

background: conic-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.:

conic-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 stożkowy składa się z dwóch kolorów, to ma dwa punkty koloru – jeden na początku okręgu gradientu (jest to odpowiednik linii gradientu w gradientach stożkowych), 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 conic-gradient().

Zaczniemy od definicji okręgu gradientu. Jest to wirtualny okrąg, na którego obwodzie zostają rozmieszczone punkty koloru. Dlatego w gradiencie stożkowym położenie punktów koloru określa się w jednostkach kątowych (ewentualnie w procentach, ale przeglądarka i tak zamienia je na wartości kątowe).

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

conic-gradient(red, green)

Dodatkowo między każdą parą kolorów może znajdować się definicja wskazówki koloru, czyli wartość kątowa lub procentowa, 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 kątowe lub procentowe. Jedna wartość określa umiejscowienie punktu koloru w konkretnym miejscu obszaru gradientu.

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

conic-gradient(in hsl, yellow 10%, red 10% 20%, green 20%)
conic-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 conic-gradient().

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

<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-conic-gradient()

Funkcja repeating-conic-gradient() ma taką samą składnię, jak funkcja conic-gradient(), ale różni się od niej jednym szczegółem pod względem sposobu działania. Funkcja repeating-conic-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łą dostępną powierzchnię i wtedy między funkcjami conic-gradient() i repeating-conic-gradient() nie ma różnicy. Działanie funkcji repeating-conic-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:

conic-gradient(in hsl, yellow, red, green)
repeating-conic-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:

conic-gradient(yellow 10deg, red 20deg, green 30deg);

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

Zamienimy funkcję conic-gradient() na repeating-conic-gradient(), ustawienia punktów koloru pozostawiając niezmienione:

repeating-conic-gradient(in hsl, yellow 10deg, red 20deg, green 30deg);

Efekt:

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

Podsumowanie