CSS -Verläufe
Mit CSS-Verläufen können Sie fließende Übergänge zwischen zwei oder mehr festgelegten Farben anzeigen.
CSS definiert drei Arten von Farbverläufen:
- Lineare Farbverläufe (geht nach unten/oben/links/rechts/diagonal)
- Radiale Farbverläufe (definiert durch ihren Mittelpunkt)
- Kegelförmige Farbverläufe (um einen Mittelpunkt gedreht)
Lineare CSS-Verläufe
Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren. Farbstopps sind die Farben, zwischen denen Sie glatte Übergänge rendern möchten. Sie können neben dem Verlaufseffekt auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Richtung - Von oben nach unten (dies ist die Standardeinstellung)
Das folgende Beispiel zeigt einen linearen Farbverlauf, der oben beginnt. Es beginnt rot und geht in gelb über:
Beispiel
#grad {
background-image: linear-gradient(red, yellow);
}
Richtung - von links nach rechts
Das folgende Beispiel zeigt einen linearen Farbverlauf, der von links beginnt. Es beginnt rot und geht in gelb über:
Beispiel
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Richtung - Diagonal
Sie können einen diagonalen Farbverlauf erstellen, indem Sie sowohl die horizontale als auch die vertikale Startposition angeben.
Das folgende Beispiel zeigt einen linearen Farbverlauf, der links oben beginnt (und rechts unten verläuft). Es beginnt rot und geht in gelb über:
Beispiel
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Winkel verwenden
Wenn Sie die Richtung des Farbverlaufs besser steuern möchten, können Sie anstelle der vordefinierten Richtungen (nach unten, nach oben, nach rechts, nach links, nach unten rechts usw.) einen Winkel definieren. Ein Wert von 0 Grad entspricht "nach oben". Ein Wert von 90 Grad entspricht "nach rechts". Ein Wert von 180 Grad entspricht "nach unten".
Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);
Das folgende Beispiel zeigt, wie Winkel auf linearen Farbverläufen verwendet werden:
Beispiel
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Verwendung mehrerer Farbstopps
Das folgende Beispiel zeigt einen linearen Verlauf (von oben nach unten) mit mehreren Farbstopps:
Beispiel
#grad {
background-image: linear-gradient(red, yellow, green);
}
Das folgende Beispiel zeigt, wie Sie einen linearen Farbverlauf (von links nach rechts) mit der Farbe des Regenbogens und etwas Text erstellen:
Beispiel
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Transparenz verwenden
CSS-Verläufe unterstützen auch Transparenz, die zum Erstellen von Fading-Effekten verwendet werden kann.
Um Transparenz hinzuzufügen, verwenden wir die Funktion rgba(), um die Farbstopps zu definieren. Der letzte Parameter in der Funktion rgba() kann ein Wert von 0 bis 1 sein und definiert die Transparenz der Farbe: 0 zeigt volle Transparenz an, 1 zeigt volle Farbe (keine Transparenz) an.
Das folgende Beispiel zeigt einen linearen Farbverlauf, der von links beginnt. Es beginnt vollständig transparent und geht in die volle Farbe Rot über:
Beispiel
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Wiederholen eines linearen Gradienten
Die Funktion repeating-linear-gradient() wird verwendet, um lineare Farbverläufe zu wiederholen:
Beispiel
Ein sich wiederholender linearer Farbverlauf:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}