CSS/Tutorials/Hintergrund/linear-gradient()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige SVG-Element siehe SVG/Farben/Verläufe.


Informationen zu diesem Text

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
CSS

Ein Farbverlauf ist eine Änderung von einer (Start-)Farbe in eine (Ziel-)Farbe mit einem anderen Farbton, Farbsättigung und/oder Farbhelligkeit. Gerade im Webdesign wirken solche Verläufe oft natürlicher als einheitliche Farbflächen.


linear-gradient()[Bearbeiten]

Mithilfe der Funktion linear-gradient können Sie einen linearen Farbverlauf erstellen, der dann als Hintergrundgrafik (border-image) eines Elements eingebunden werden kann.

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

Details: caniuse.com

Syntax

linear-gradient(
   [ <angle> | to [top | bottom] || [left | right] ],]? 
   <color-stop>, 
   <color-stop>);

Die Funktion erwartet …

  • mindestens zwei color-stops mit einer Farb- und einer optionalen Längenangabe, der festlegt, 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.
  • eine optionale Richtung, in die die Verlaufslinie läuft
    • eine background-position entsprechende Positionsangabe mit dem Schlüsselwort to;
      ( Standardwert bottom)
    • ein optionales Winkelmaß, das die Drehung festlegt.
      (Standardwert 0: Verlauf beginnt oben und führt nach unten)


Farbverläufe ohne Längenangaben ansehen …
#one {
	background-image: linear-gradient(white, black);
}
#two {
	background-image: linear-gradient(42deg, transparent, blue);
}
#rainbow {
	background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
#rainbow2 {
	background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

Die Farbverläufe im Beispiel haben in den color-stops keine Längenangaben. Deshalb beginnt der Übergang zur nächsten Farbe sofort.

color-stop[Bearbeiten]

Ein Farbverlauf erfordert …

  • mindestens zwei, durch Komma getrennte, „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.
linear-gradient(red, green, red) = linear-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.
linear-gradient(red 0, green 50%, red 100%) = linear-gradient(red, green 50%, red)
linear-gradient(red, red 25%, green 75%, green) = linear-gradient(red 25%, green 75%)
scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort


Farbverläufe mit Längenangaben ansehen …
#rainbow {
	background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
	}
#rainbox10 { 
	background-image: linear-gradient(to right, red 10px, orange 20px, orange 30px, yellow 40px, yellow 50px, green 60px, green 70px, blue 80px, blue 90px, purple 100px);
	}	
#rainbowProzent {
	background-image: linear-gradient(to right, red 17%, orange 17%, orange 34%, yellow 34%, yellow 50%, green 50%, green 67%, blue 67%, blue 84%, purple 84%);
	}	
#doppelteLaengen {
background-image: 
	linear-gradient(
		to right, 
		red      17%, 
		orange 0 34%, 
		yellow 0 50%, 
		green  0 67%, 
		blue   0 84%, 
		purple 84%
	);
}

Der Regenbogen aus dem ersten Beispiel erhält nun Längenangaben, die den Beginn des color-stops festlegen.

  • #rainbox10 erhält nun eine Längenangabe von jeweils 10px. Dadurch werden die Farbstreifen je 10px breit, anschließend folgt ein ebenfalls 10px breiter, weicher Übergang zur nächsten Farbe. Der Rest wird mit der letzten Farbe aufgefüllt.
    Von der Verwendung fester Pixelwerte ist abzuraten, da Elemente heute flexible Größen haben (sollten).
  • #rainbowProzent erhält nun Farbübergänge mit Prozentwerten. Da jeweils zwei color-stops zusammenfallen (yellow 34%, yellow 50%, green 50%,) gibt es einen scharfen Übergang
  • #doppelteLaengen: Es auch möglich doppelte Längenangaben (yellow 0 50%,) anzugeben. So müssen die Werte nicht zwei mal notiert werden. (Dabei ist es empfehlenswert, den ersten Wert nicht auf die überschlägig berechneten 34%, sondern auf 0 zu setzen, da der Code so besser zu warten ist.)
    Dies funktioniert in allen modernen Browsern, erfordert aber für IE9-11 einen Fallback.

Richtung[Bearbeiten]

Ein Farbverlauf verläuft normalerweise von oben nach unten.

Optional können Sie die Richtung des Verlaufs angeben

  • als Winkelmaß
    oder
  • durch die Angabe einer Ecke (top right, bottom right, bottom left, top left) bzw. Seite des Elements (top, right, bottom, left) in Verbindung mit dem Schlüsselwort to.
Die angegebene Richtung ist die Ausbreitungsrichtung des Verlaufs.
Der Standardwert ist dabei to bottom = 180deg = 200grad = 3.1415rad
Der Winkel wird mathematisch negativ, also mit dem Uhrzeigersinn, gemessen (0deg = to top, 90deg = to right).
Der Scheitelpunkt des Winkels ist dabei der Mittelpunkt der durch background-clip festgelegten Hintergrundbox des Elements.
Angabe einer Richtung ansehen …
.landscape    { width: 20em; }
.square       { width: 10em; }
.portrait     { width: 5em; }
.angle  div { 
  background-image: 
    linear-gradient(45deg, red 50%, blue 50%); 
}
.corner div { 
  background-image:
    linear-gradient(to top right, red 50%, blue 50%); 
}

Farbverläufe mit einer Richtung von 45° führen, anders als vielleicht vermutet, nur bei einem Quadrat durch die rechte obere Ecke!

Deshalb ist es oft besser, antelle eines Winkelmaßes eine Ecke anzugeben.

Exkurs: Flaggen[Bearbeiten]

Diese Verläufe lassen sich velfältig kombinieren:


Flaggen zeichen mit CSS ansehen …
figure {
#Deutschland {
    background-image: 
      linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
#Frankreich {
    background-image: 
      linear-gradient(to right, blue 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
#Congo {
    background-image: 
      linear-gradient(135deg, green 40%, #fbde4a 40%, #fbde4a 60%, red 60%);
}
#Namibia {
    background-image:
      url(Stern_Namibia_Flagge.svg),
      linear-gradient(147deg, darkblue 40%, white 40%, white 42%, red 42%, 
                              red 58%, white 58%, white 60%, green 60%);
    background-position: 20px 20px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 70px, auto;
}
<h2>Länderflaggen mit CSS</h2>
<figure id="Deutschland">
   <figcaption>Deutschlandflagge</figcaption>
</figure>
<figure id="Frankreich">
   <figcaption>Tricolore</figcaption>
</figure>

So können Grafiken durch CSS erzeugt werden, ohne dass es zu zusätzlichen http-requests kommt. In Kombination mit radial-gradient und den Pseudoelementen ::after und ::before sind der Phantasie keine Grenzen gesetzt.

Beachten Sie: Solche Grafiken sollten besser mit SVG umgesetzt werden.
  • Farbverläufe werden vom Browser immer wieder neu errechnet, sodass man also den Prozessor mehr belastet (Akkuverbrauch bei mobilen Geräten) und unter Umständen den Seitenaufbau verlangsamt.
  • Es gibt für Hintergrundbilder keine Möglichkeit einen Alternativtext zur Verfügung zu stellen.
Empfehlung: für das Zeichnen von Flaggen ist das SVG-Format prädestiniert:


Unterstreichungen[Bearbeiten]

Für Unterstreichungen gibt es die Möglichkeit, die Eigenschaft text-decoration zu verwenden oder dem entsprechenden Element eine untere Rahmenlinie zu geben. Allerdings erlauben weder text-decoration-style noch border-style eine individuelle Gestaltung der Linie. Vorgesehen ist eine Eigenschaft border-clip, sie wird derzeit (Stand November 2020) noch von keinem Browser unterstützt. Allerdings wären Strichpunktlinien damit auch nicht möglich.

Beispiel ansehen …
h2 {
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-bottom: 3px;
}
h2.kurz {
  background-size: .5em 2px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
}
h2.lang {
  background-size: 1em 2px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
}
h2.länger {
  background-size: 1.5em 2px;
  background-image: linear-gradient(to right, currentColor 75%, transparent 50%);
}
h2.strichpunkt {
  background-size: 20px 2px;
  background-image: linear-gradient(to right, currentColor 10px, transparent 10px,
                                              transparent 14px, currentColor 14px,
                                              currentColor 16px, transparent 16px);
}
h2.sos {
  background-size: 96px 2px;
  background-image: linear-gradient(to right, currentColor 2px, transparent 2px,
                                              transparent 6px, currentColor 6px,
                                              currentColor 8px, transparent 8px,
                                              transparent 12px, currentColor 12px,
                                              currentColor 14px, transparent 14px,
                                              transparent 18px, currentColor 18px,
                                              currentColor 28px, transparent 28px,
                                              transparent 32px, currentColor 32px,
                                              currentColor 42px, transparent 42px,
                                              transparent 46px, currentColor 46px,
                                              currentColor 56px, transparent 56px,
                                              transparent 60px, currentColor 60px,
                                              currentColor 62px, transparent 62px,
                                              transparent 66px, currentColor 66px,
                                              currentColor 68px, transparent 68px,
                                              transparent 72px, currentColor 72px,
                                              currentColor 74px, transparent 74px,
                                              transparent 96px);
}

Mit SVG haben Sie auch hier deutlich mehr Möglichkeiten.

repeating-linear-gradient()[Bearbeiten]

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

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

Details: caniuse.com

Raster mit übereinandergelegeten Verläufen ansehen …
body {
  background-color: #8FBC8F;
  background-image:
    repeating-linear-gradient(transparent, transparent 30px, white 30px, white 32px),
    repeating-linear-gradient(to right, transparent, transparent 30px, white 30px, white 32px);
  height: 85vh;
}

Es werden zwei Verläufe übereinandergelegt. (Siehe auch Verwenden mehrerer Hintergrundbilder)

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.

Beispiel ansehen …
main {
  background-color: #8FBC8F;
  background-image:
    linear-gradient(transparent, transparent 30px, white 30px, white 32px), 
    linear-gradient(to right, transparent, transparent 30px, white 30px, white 32px);
  background-repeat: repeat-y, repeat-x;
  background-size: 100% 32px, 32px 100%;
  height: 85vh;
}
Beachten Sie:
Beispiel ansehen …
#one {
  background-image: repeating-linear-gradient(90deg, gold, blue);
}
#two { 
  background-image: repeating-linear-gradient(90deg, gold, blue 10%);
}
#three { 
  background-image: repeating-linear-gradient(90deg, gold, blue 5%, gold 10%);
}
  1. repeating-linear-gradient(gold, blue) = repeating-linear-gradient(gold 0 , blue 100%). Das heißt, es erfolgt lediglich eine Wiederholung des Verlaufs.
  2. Wenn Anfang und Ende des Verlaufs verschiedene Farben haben, so wird es einen scharfen Übergang geben, da die Verläufe einfach nur aneinander gereiht werden.
  3. Falls Sie mit prozentualen Längenangaben arbeiten, müssen Sie die Angaben durch die Anzahl der gewünschten Wiederholungen dividieren.


Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  • grabient.com Grab and Customize a Web Gradient (sehr intuitiver Gradient-Generator)
  • Lea Verou: CSS3 Patterns (viele Musterbeispiele)
  • `uigradients.com: Bautiful Gradients große Sammlung von Verläufen, die aus zueinander passenden Farben bestehen. (Oft sind es nur Farbtöne - so wirkt der Verlauf „echt“ und natürlich.