SELF-Treffen in Mainz 2023

Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.

CSS/Tutorials/Hintergrund/radial-gradient()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Mithilfe der Funktion radial-gradient() können Sie einen radialen Farbverlauf als Hintergrundgrafik eines Elements erstellen.
Browserunterstützung
caniuse.com

Syntax: 

radial-gradient(
 [ <ending-shape> || <size> ]? [ at <position> ]? ,
 <color-stop-list>

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


Kreisförmige Verläufe ansehen …
#eins { 
   background-image: 
    radial-gradient(circle, red 30%, white 30%); 
}
#zwei { 
  background-image: 
    radial-gradient(red 30%, white 30%); 
}
#drei { 
  background-image: 
    radial-gradient(circle, red 25%, white 75%); 
}
#vier { 
  background-image: 
    radial-gradient(red 25%, white 50%); 
}
ansehen …

Größe der Endform

  • 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


Größe der Endform ansehen …
#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%);
}
#sechs {
    background-image: radial-gradient(closest-corner at center 70%, gold 20%, yellow 30%, dimgray 60%);
}
#sieben {
    background-image: radial-gradient(farthest-side at 70% 70%, gold 20%, yellow 30%, dimgray 60%);
}
#acht {
    background-image: radial-gradient(farthest-corner at 70% 70%, gold 20%, yellow 30%, dimgray 60%);
}
ansehen …

repeating-radial-gradient()

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

Browserunterstützung
caniuse.com
repeating-radial-gradient ansehen …
body {
  background: 
    repeating-radial-gradient(
      black, 
      black 5px, 
      white 5px, 
      white 10px);
  height: 85vh;
}
ansehen …

Das konzentrische Muster wiederholt sich immer wieder. Die Angabe der scharfen Übergänge könnte auch mit doppelten Längenangaben vorgenommen werden (repeating-radial-gradient(black 0 5px, white 0 10px); – funktioniert nicht in IE9-11!).

Da die Höhe auf 85vh (85% der Viewporthöhe) begrenzt ist, wird das Muster dann erneut gezeichnet.

Denselben Effekt erreichen Sie auch durch die Kombination von background-size und background-repeat. Gegebenenfalls muss die Höhe fest vorgegeben werden oder auf andere Einheiten wie vh bzw. vw ausgewichen werden.

Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Hintergrund/radial-gradient()&oldid=84923“