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.

Referenz:CSS/Eigenschaften/radial-gradient

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft radial-gradient() CSS 3.0
Beschreibung legt einen radialen Farbverlauf fest
erlaubte Werte

Die Funktion erwartet folgende Argumente:

  • eine Form (shape)
    • ellipse (Standardwert) oder circle
  • mindestens zwei „Color-Stop“-Angaben
    • Ein „Color-Stop“ besteht aus einer Farb- und einer Längenangabe und legt fest, 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.
    • radial-gradient(red, green, red) = radial-gradient(red 0, green 50%, red 100%)
    • Auf die Angaben 0 und 100% kann grundsätzlich verzichtet werden, ggf. ebenso auf einen ersten und letzten Color-Stop.
    • radial-gradient(red 0, green 50%, red 100%) = radial-gradient(red, green 50%, red)
    • radial-gradient(red, red 25%, green 75%, green) = radial-gradient(red 25%, green 75%)
    • scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort
  • die Größe der Endform (extent-keyword)
    • closest-side, Die Endform trifft auf die der Mitte nächstgelegene Seite (für circle) oder trifft auf vertikale und horizontale Seiten (für ellipse)
    • closest-corner, Endform trifft nächste Ecke
    • farthest-side, trifft auf die der Mitte am weitesten entfernten Seite
    • farthest-corner, (Standardwert) trifft auf die am weitesten entfernte Ecke
default-Wert

none

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif radial-gradients
Beispiel
#eins {
  background-image: radial-gradient(circle closest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#zwei {
  background-image: radial-gradient(circle closest-corner at center, gold 20%, yellow 30%, dimgray 60%);
}
#drei {
  background-image: radial-gradient(circle farthest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#vier {
  background-image: radial-gradient(circle farthest-corner at center, gold 20%, yellow 30%, dimgray 60%);
}
#fuenf {
  background-image: radial-gradient(closest-side at center 70%, gold 20%, yellow 30%, dimgray 60%);
}
Beachten Sie

{{{Hinweis}}}

Tipp