CSS/Eigenschaften/Hintergrundfarben und -bilder/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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com


Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>radial-gradient()</title>
    <style>
      body {
        background:
          radial-gradient(black 15%, transparent 16%) 0 0,
          radial-gradient(black 15%, transparent 16%) 8px 8px,
          radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
          radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
        background-color: #282828;
        background-size: 16px 16px;
      }
      div {
        display: inline-block;
        height: 15em;
        margin: 0.5em;
        padding: 1em;
        width: 25em;
      }
      #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 30%, white 70%); }
      #vier { background-image: radial-gradient(red 30%, white 70%); }
    </style>
  </head>
  <body>
    <h1>radiale Farbverläufe</h1>
    <div id="eins">Kreis mit scharfer Kante (2 color-stops bei 30%)</div>
    <div id="zwei">Ellipse mit scharfer Kante (2 color-stops bei 30%)</div>
    <div id="drei">Kreis mit Farbverlauf</div>
    <div id="vier">Ellipse mit Farbverlauf</div>
  </body>
</html>

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


Beispiel 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%);
  }

[Bearbeiten] repeating-radial-gradient()

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

  • CSS 3.0
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
body {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  height: 85vh;
}

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

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML