CSS/Tutorials/Hintergrund/conic-gradient()
Mithilfe der Funktion conic-gradient() können Sie einen kreisförmigen Farbverlauf als Hintergrundgrafik eines Elements erstellen. Im Unterschied zum radialen Verlauf, der beginnend im Mittelpunkt nach außen läuft (in Richtung des Radius, deshalb radial), verläuft dieser um den Kreis herum. Der Name ergibt sich, weil bei manchen Ergebnissen der Eindruck eines Kegels (lat, conus) entsteht.
Inhaltsverzeichnis
conic-gradient()
Syntax:
conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list>
Die Funktion erwartet
- mindestens zwei color-stops mit einer Farb- und einer optionalen Längenangabe, der festlegt, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.
Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind. - ein optionales Winkelmaß, das den Beginn festlegt und mit
from
eingeleitet wird. (Standardwert 0: Verlauf beginnt oben) - eine background-position entsprechende Positionsangabe, die das Zentrum des Verlaufs festlegt (Standardwert center center)
.conic-gradient-sw {
background: conic-gradient(black, #fff, #000);
}
.conic-gradient1 {
background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);
}
.farbkreis {
background: conic-gradient(#c32e04 22deg, #df6c20 0 67deg, #dfac20 0 112deg, #8db243 0 157deg, hsl(85 100% 30%) 0 202deg, #306f91 0 247deg, #9357b9 0 292deg, #660033 0 337deg,#c32e04 0);
}
.sunbeam {
background: conic-gradient(from 0.25turn at 20% 50%, #dfac20, 10deg, #306f91, 350deg, #e6f2f7);
border-radius: 0;
}
.squares {
background: conic-gradient(#c32e04 90deg, #dfac20 0 180deg, #306f91 0 270deg, #5a9900 0);
border-radius: 0;
}
.prism {
background: conic-gradient(at 0% 30%, #c32e04 10%, yellow 30%, #306f91 50%);
border-radius: 0;
}
Der Farbkreis, .squares
und das Prisma verwenden harte Übergänge, indem die colorstops zwei Längenangaben (double position syntax) erhalten, wie es schon im linear-gradient()-Kapitel besprochen wurde.
Zur Realisierung von Diagrammen oder Schachbrettmustern für Spielfelder sind SVG-Elemente, die dann mit Metadaten und Text beschriftet werden können, besser geeignet.[1]
Siehe auch: Datenvisualisierung
repeating-conic-gradient()
Sich wiederholende konische Farbverläufe können Sie mithilfe der Funktion repeating-conic-gradient() erreichen.
.starburst{
background:
repeating-conic-gradient(
yellow, #c32e04 20deg
);
}
.starburst2 {
background: repeating-conic-gradient(
from 3deg at 0 0,
#337599 2deg,
yellow 4deg 7deg,
#337599 15deg 18deg
);
}
.macedonia {
background:
radial-gradient(
#dfac20 10%,
#c32e04 0 12%,
transparent 12%
),
repeating-conic-gradient(
#dfac20 0 15deg,
#c32e04 0 40deg
);
border-radius: 0;
}
CSS3 Patterns
Konische Farbverläufe vereinfachen besonders das Entwerfen von komplexen Mustern für Hintergrundbilder. Lea Verou schuf bereits 2011 ihre CSS3 Patterns Gallery.[2] Einige dieser Muster lassen sich nun vereinfacht notieren, wie Ana Tudor zeigt.[3]
.checkers {
background:
repeating-conic-gradient(
black 0deg 25%,
white 0deg 50%);
background-size: 60px 60px;
}
.diagonalesSchach {
background-image:
repeating-conic-gradient(
from 45deg,
black 0% 25%,
white 0% 50%);
background-size: 2em 2em;
}
.squares {
background:
repeating-conic-gradient(#c32e04 0 25%, #dfac20 0 50%, #337599 0 75%, #5a9900 0 100%);
background-size: 2em 2em;
}
.pyramid {
background:
conic-gradient(from 45deg,
hsl(13 96% 39% / 1) 25%,
hsl(13 96% 39% / 0.86) 0% 50%,
hsl(13 96% 39% / 0.63) 0% 75%,
hsl(13 96% 39% / 0.50) 0%);
background-size: 2em 2em;
}
.triangles {
background: conic-gradient(from 26.56505deg, white 0% 63.43495deg, blue 0% 126.8699deg, white 0% 50%, blue 0% 243.43495deg, white 0% 306.8699deg, blue 0%) 0 0/ 16px 32px;
}
.bavarian {
background:
conic-gradient(
from 26.56505deg,
white 0% 126.8699deg,
DeepSkyBlue 0% 50%,
white 0% 306.8699deg,
DeepSkyBlue 0%
)
0 0/ 16px 32px;
}
glänzendes Metall
Mit dieser Funktion sind optisch ansprechende Effekte wie ein metallic look mit scheinbar reflektierenden Oberflächen möglich:
.gold {
--accentcolor: gold;
background:
repeating-conic-gradient(
var(--accentcolor) 0deg,
white 45deg,
var(--accentcolor) 90deg
);
}
.silver {
--accentcolor: silver;
background:
repeating-conic-gradient(
var(--accentcolor) 0deg,
white 45deg,
var(--accentcolor) 90deg
);
}
Auf glänzenden Flächen bildet sich oft ein sphärisches Lichtkreuz. Dies wird mit einem repeating-conic-gradient()
nachgebildet. Der Verlauf changiert von der Grundfarbe zu weiß und wieder zurück.
Siehe auch:
- CodePen: pure CSS metallic buttons with shadow (no pseudos) von Ana Tudor
- CodePen: Metallic button von Ana Tudor
- CodePen: Starry (uses clip-path) von Ana Tudor
Weblinks
- ↑ W3C: Non-text Content Understanding SC 1.1.1
- ↑ Lea Verou: CSS3 patterns gallery and a new pattern
- ↑ css-tricks: Background Patterns, Simplified by Conic Gradients von Ana Tudor, 28.05.2020
- W3C: 3.3. Conic Gradients
CSS Images Module Level 4, Editor’s Draft, 9 November 2020 - MDN: conic-gradient()
- kulturbanause: CSS conic gradients (gewinkelte Verläufe)
- Lea Verou: https://leaverou.github.io/conic-gradient/fill mit vielen spektakulären Beispielen am Ende der Seite.
- alligator.io Introduction to Conic Gradients in CSS
- css-challenges.com: conic-gradient-patterns
- css-tricks: Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis