Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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

konischer und radialer Verlauf
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]