CSS kuželové přechody
CSS kuželové přechody
Kuželový přechod je přechod s barevnými přechody otočenými kolem středového bodu.
Chcete-li vytvořit kuželový přechod, musíte definovat alespoň dvě barvy.
Syntax
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Ve výchozím nastavení je úhel 0 stupňů a poloha je střed.
Pokud není zadán žádný stupeň , budou barvy rovnoměrně rozprostřeny kolem středového bodu.
Kuželový přechod: tři barvy
Následující příklad ukazuje kuželový přechod se třemi barvami:
Příklad
Kuželový přechod se třemi barvami:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Kuželový přechod: Pět barev
Následující příklad ukazuje kuželový přechod s pěti barvami:
Příklad
Kuželový přechod s pěti barvami:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Kuželový přechod: tři barvy a stupně
Následující příklad ukazuje kuželový přechod se třemi barvami a stupněm pro každou barvu:
Příklad
Kuželový přechod se třemi barvami a stupněm pro každou barvu:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Vytvořte koláčové grafy
Stačí přidat border-radius: 50%
, aby kuželový přechod vypadal jako koláč:
Příklad
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Zde je další koláčový graf s definovanými stupni pro všechny barvy:
Příklad
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Kuželový přechod se specifikovaným úhlem
[z úhlu ] určuje úhel, o který je otočen celý gradient kuželosečky.
Následující příklad ukazuje kuželový gradient s úhlem od 90 stupňů:
Příklad
Kuželový gradient s úhlem od:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Kuželový přechod se specifikovanou středovou polohou
[at position ] určuje střed kuželosečky.
Následující příklad ukazuje kuželový přechod se středovou polohou 60 % 45 %:
Příklad
Kuželový gradient se zadanou středovou polohou:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Opakování kuželového gradientu
Funkce repeating-conic-gradient()
se používá k opakování kuželových přechodů:
Příklad
Opakující se kuželový gradient:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Zde je opakující se kuželový gradient s definovanými barevnými počátky a ukončeními:
Příklad
Opakující se kuželový přechod s definovanými začátky a zastaveními barvy:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Přechodové funkce CSS
V následující tabulce jsou uvedeny funkce přechodu 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 |