CSS Kegelförmige Farbverläufe
CSS Kegelförmige Farbverläufe
Ein konischer Farbverlauf ist ein Farbverlauf mit um einen Mittelpunkt gedrehten Farbübergängen.
Um einen konischen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farben definieren.
Syntax
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Standardmäßig ist der Winkel 0 Grad und die Position die Mitte.
Wenn kein Grad angegeben ist, werden die Farben gleichmäßig um den Mittelpunkt herum verteilt.
Kegelverlauf: Drei Farben
Das folgende Beispiel zeigt einen konischen Farbverlauf mit drei Farben:
Beispiel
Ein konischer Farbverlauf mit drei Farben:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Kegelverlauf: Fünf Farben
Das folgende Beispiel zeigt einen konischen Farbverlauf mit fünf Farben:
Beispiel
Ein konischer Farbverlauf mit fünf Farben:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Kegelverlauf: Drei Farben und Grad
Das folgende Beispiel zeigt einen konischen Farbverlauf mit drei Farben und einem Grad für jede Farbe:
Beispiel
Ein konischer Farbverlauf mit drei Farben und einem Grad für jede Farbe:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Kreisdiagramme erstellen
Fügen Sie einfach hinzu border-radius: 50%, damit der konische Farbverlauf wie ein Kuchen aussieht:
Beispiel
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Hier ist ein weiteres Tortendiagramm mit definierten Graden für alle Farben:
Beispiel
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Konischer Farbverlauf mit angegebenem Winkel
Der [von Winkel ] gibt einen Winkel an, um den der gesamte Kegelverlauf gedreht wird.
Das folgende Beispiel zeigt einen konischen Farbverlauf mit einem Winkel von 90 Grad:
Beispiel
Ein konischer Verlauf mit einem Winkel von:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Konischer Farbverlauf mit festgelegter Mittelposition
Die [an Position ] gibt den Mittelpunkt des konischen Gradienten an.
Das folgende Beispiel zeigt einen konischen Gradienten mit einer Mittelposition von 60 % 45 %:
Beispiel
Ein konischer Gradient mit einer bestimmten Mittelposition:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Wiederholen eines konischen Farbverlaufs
Die repeating-conic-gradient()Funktion wird verwendet, um konische Gradienten zu wiederholen:
Beispiel
Ein sich wiederholender konischer Gradient:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Hier ist ein sich wiederholender konischer Farbverlauf mit definierten Farbstarts und Farbstopps:
Beispiel
Ein sich wiederholender konischer Farbverlauf mit definierten Farbstarts und Farbstopps:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS-Verlaufsfunktionen
Die folgende Tabelle listet die CSS-Verlaufsfunktionen auf:
| 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 |