CSS/Eigenschaften/Hintergrundfarben und -bilder/conic-gradient()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mithilfe der Funktion conic-gradient() können Sie einen konischen Farbverlauf als Hintergrundgrafik eines Elements erstellen. Im Unterschied zum radialen Verlauf, der um einen gemeinsamen Mittelpunkt herumläuft; verläuft dieser um den Kreis herum.

  • CSS 3.0
  • Chrome
  • Edge
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Datei:Gradients.svg


konischeVerläufe ansehen …
.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;
}
Beachten Sie: Auch wenn der Farbkreis in Donut-Form wie ein Kreisdiagramm aussieht, ist er doch eine inhaltsleere Hintergrundgrafik. Zur Realisierung von Diagrammen sind SVG-Elemente, die dann mit Metadaten und Text beschriftet werden können, besser geeignet.
Siehe auch: SVG/Tutorials/Datenvisualisierung

repeating-conic-gradient()[Bearbeiten]

Sich wiederholende konische Farbverläufe können Sie mithilfe der Funktion repeating-conic-gradient() erreichen.

  • CSS 3.0
  • Chrome
  • Edge
  • Leer
  • Opera
  • Safari

Details: caniuse.com

repeating-conic-gradient() ansehen …
.starburst{
background: repeating-conic-gradient(yellow, #c32e04 20deg);
}

.starburst2 {
  background: repeating-conic-gradient(from 3deg at 0 0, #306f91 2deg, yellow 4deg 7deg, #306f91 15deg 18deg, #306f91 20deg);
}

.macedonia {
  background: radial-gradient(#dfac20 10%, #c32e04 0 12%, transparent 12%),repeating-conic-gradient(#dfac20 0 15deg , #c32e04 0 40deg);
  border-radius: 0;
}

.checkers {
background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%);
background-size: 60px 60px;
}

Anwendungsbeispiel[Bearbeiten]

Mit dieser Funktion sind optisch ansprechende Effekte wie ein metallic look mit scheinbar reflektierenden Oberflächen möglich:


Weblinks[Bearbeiten]