CSS-Verlauf

Verlaufhintergrund

CSS Farbverläufe ermöglichen es Ihnen, eine glatte Übergangsweiche zwischen zwei oder mehreren angegebenen Farben anzuzeigen.

CSS definiert zwei Arten von Farbverläufen:

  • Lineare Farbverlauf((nach unten/obenauf/nach links/nach rechts/diagonal))
  • Radialer Farbverlauf((von seinem Zentrum definiert))

CSS lineare Farbverlauf

Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbtöne definieren. Farbtöne sind die Farben, die Sie für eine glatte Übergangsweiche darstellen möchten. Sie können auch den Ausgangspunkt und die Richtung (oder den Winkel) sowie den Farbverlaufseffekt einstellen.

Syntax

background-image: linear-gradient(Richtung, color-stop1, color-stop2, ...);

Lineare Farbverlauf - von oben nach unten (Standard)

Der folgende Beispiel zeigt eine lineare Farbverlauf, der von oben beginnt. Er beginnt mit Rot und übergeht in Gelb:

Von oben nach unten (Standard)

Beispiel

#grad {
  background-image: linear-gradient(red, yellow);
}

Versuchen Sie es selbst

Lineare Verlauf - Von links nach rechts

Das folgende Beispiel zeigt einen linearen Verlauf (von links) beginnend mit Rot und übergehend in Gelb:

Von links nach rechts

Beispiel

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Versuchen Sie es selbst

Lineare Verlauf - Diagonale

Sie können Diagonale Verläufe durch Angabe der horizontalen und vertikalen Ausgangspositionen erreichen.

Das folgende Beispiel zeigt einen linearen Verlauf (von links oben nach rechts unten) beginnend am linken oberen Ecke. Er beginnt mit Rot und übergeht in Gelb:

Von links oben nach rechts unten

Beispiel

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Versuchen Sie es selbst

Verwendung von Winkeln

Wenn Sie mehr Kontrolle über den Verlauffluss haben möchten, können Sie einen Winkel definieren, um die vorgegebenen Richtungen (nach unten, nach oben, nach rechts, nach links, nach rechts unten etc.) zu ersetzen. Der Wert 0deg entspricht 'nach oben' (to top). Der Wert 90deg entspricht 'nach rechts' (to right). Der Wert 180deg entspricht 'nach unten' (to bottom).

180deg

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Dieser Winkel spezifiziert den Winkel zwischen der Horizontalen und der Verlaufform.

Das folgende Beispiel zeigt, wie man Winkel in linearen Verläufen verwendet:

Beispiel

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Versuchen Sie es selbst

Verwendung mehrerer Farbtons

Der folgende Beispiel zeigt eine lineare Verlauffarbe mit mehreren Farbtons (von oben nach unten):

Beispiel

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Versuchen Sie es selbst

Der folgende Beispiel zeigt, wie man eine lineare Verlauffarbe (von links nach rechts) mit Regenbogenfarben und einigen Texten erstellt:

Verlaufhintergrund

Beispiel

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Versuchen Sie es selbst

Verwendung von Transparenz

CSS-Verläufe unterstützen ebenfalls Transparenz und können auch zum Erstellen von Verlaufeffekten verwendet werden.

Um Transparenz hinzuzufügen, verwenden wir die Funktion rgba() zur Definition des Farbtons. Der letzte Parameter der rgba()-Funktion kann einen Wert zwischen 0 und 1 sein, der die Transparenz der Farbe definiert: 0 bedeutet vollständig transparent, 1 bedeutet vollfarbig (keine Transparenz).

Das folgende Beispiel zeigt einen von links beginnenden linearen Verlauf. Er beginnt vollständig transparent und wechselt dann zu vollfarbigem Rot:

Beispiel

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Versuchen Sie es selbst

Wiederholte lineare Verlaufsform

repeating-linear-gradient() Funktion zur Wiederholung der linearen Verlaufsform:

Beispiel

Wiederholte lineare Verlaufsform:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Versuchen Sie es selbst