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.:
Efekt:
Aby zmienić kąt początkowy gradientu stożkowego, należy wpisać słowo kluczowe from
, a po nim podać kąt, np.:
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.:
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.:
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 ł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
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.:
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:
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:
Efekt działania tych dwóch funkcji będzie taki sam. A teraz spójrz na poniższy przykład:
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:
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
Zastosowanie | Funkcje CSS conic-gradient() i repeating-conic-gradient() mogą być używane wszędzie tam, gdzie można używać obrazów |
---|---|
Specyfikacja | CSS Images Module Level 4, funkcja CSS conic-gradient() |