CSS kegelvormige verlopen
CSS kegelvormige verlopen
Een kegelvormig verloop is een verloop met kleurovergangen die rond een middelpunt zijn geroteerd.
Om een kegelvormig verloop te maken, moet u ten minste twee kleuren definiëren.
Syntaxis
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Standaard is de hoek 0deg en de positie het midden.
Als er geen graad is opgegeven, worden de kleuren gelijkmatig rond het middelpunt verdeeld.
Kegelverloop: drie kleuren
Het volgende voorbeeld toont een kegelvormig verloop met drie kleuren:
Voorbeeld
Een kegelvormig verloop met drie kleuren:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Kegelverloop: vijf kleuren
Het volgende voorbeeld toont een kegelvormig verloop met vijf kleuren:
Voorbeeld
Een kegelvormig verloop met vijf kleuren:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Kegelverloop: drie kleuren en graden
Het volgende voorbeeld toont een kegelvormig verloop met drie kleuren en een graad voor elke kleur:
Voorbeeld
Een kegelvormig verloop met drie kleuren en een graad voor elke kleur:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Cirkeldiagrammen maken
Voeg gewoon toe border-radius: 50%om de kegelvormige gradiënt op een taart te laten lijken:
Voorbeeld
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Hier is nog een cirkeldiagram met gedefinieerde graden voor alle kleuren:
Voorbeeld
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Conisch verloop met gespecificeerd vanuit hoek
De [van hoek ] specificeert een hoek waarmee de gehele kegelvormige gradiënt wordt geroteerd.
Het volgende voorbeeld toont een conisch verloop met een hoek van 90 graden:
Voorbeeld
Een kegelvormig verloop met een vanuit een hoek:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Conisch verloop met gespecificeerde middenpositie
De [op positie ] specificeert het midden van de conische gradiënt.
Het volgende voorbeeld toont een conisch verloop met een middenpositie van 60% 45%:
Voorbeeld
Een kegelvormig verloop met een gespecificeerde middenpositie:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Een kegelvormig verloop herhalen
De repeating-conic-gradient()functie wordt gebruikt om kegelvormige gradiënten te herhalen:
Voorbeeld
Een herhalend kegelvormig verloop:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Hier is een herhalend kegelvormig verloop met gedefinieerde kleurstarts en kleurstops:
Voorbeeld
Een herhalend kegelvormig verloop met gedefinieerde kleurstarts en kleurstops:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS-gradiëntfuncties
De volgende tabel bevat de CSS-verloopfuncties:
| 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 |