Gradienty stożkowe CSS
Gradienty stożkowe CSS
Gradient stożkowy to gradient z przejściami kolorów obróconymi wokół punktu środkowego.
Aby stworzyć gradient stożkowy, musisz zdefiniować co najmniej dwa kolory.
Składnia
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Domyślnie kąt to 0 stopni, a pozycja to środek.
Jeśli nie zostanie określony żaden stopień , kolory zostaną równomiernie rozłożone wokół punktu środkowego.
Gradient stożkowy: trzy kolory
Poniższy przykład pokazuje gradient stożkowy z trzema kolorami:
Przykład
Stożkowy gradient z trzema kolorami:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Gradient stożkowy: pięć kolorów
Poniższy przykład przedstawia gradient stożkowy z pięcioma kolorami:
Przykład
Stożkowy gradient z pięcioma kolorami:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Gradient stożkowy: trzy kolory i stopnie
Poniższy przykład przedstawia gradient stożkowy z trzema kolorami i stopniem dla każdego koloru:
Przykład
Gradient stożkowy z trzema kolorami i stopniem dla każdego koloru:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Twórz wykresy kołowe
Wystarczy dodać border-radius: 50%, aby gradient stożkowy wyglądał jak ciasto:
Przykład
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Oto kolejny wykres kołowy ze zdefiniowanymi stopniami dla wszystkich kolorów:
Przykład
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Gradient stożkowy z określonym kątem
[from angle ] określa kąt, o który obrócony jest cały gradient stożkowy.
Poniższy przykład pokazuje gradient stożkowy o kącie od 90deg:
Przykład
Stożkowy gradient z kątem prostym:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Gradient stożkowy z określoną pozycją środkową
[w pozycji ] określa środek gradientu stożkowego.
Poniższy przykład pokazuje gradient stożkowy z pozycją środkową 60% 45%:
Przykład
Gradient stożkowy o określonej pozycji środkowej:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Powtarzanie gradientu stożkowego
Funkcja repeating-conic-gradient()służy do powtarzania gradientów stożkowych:
Przykład
Powtarzający się gradient stożkowy:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Oto powtarzający się gradient stożkowy ze zdefiniowanymi kolorami początkowymi i końcowymi:
Przykład
Powtarzający się gradient stożkowy ze zdefiniowanymi kolorami początkowymi i końcowymi:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Funkcje gradientu CSS
W poniższej tabeli wymieniono funkcje gradientowe CSS:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |