CSS3 Verläufe
Mit CSS3-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.
Früher mussten Sie Bilder verwenden, um diese Effekte zu erzielen. Durch die Verwendung von CSS3-Farbverläufen können Sie jedoch die Downloadzeit und die Bandbreitennutzung reduzieren. Außerdem sehen Elemente mit Farbverlaufseffekten beim Vergrößern besser aus, weil der Farbverlauf vom Browser erzeugt wird.
CSS3 definiert zwei Arten von Farbverläufen:
- Lineare Farbverläufe - nach unten/nach oben/nach links/nach rechts/diagonal
- Radiale Farbverläufe - definiert durch ihren Mittelpunkt
Eigenschaften im Zusammenhang mit linearen Farbverläufen:background-image。
Online-Tool für lineare Farbverläufe:Online Gradient Tool.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Hinweis:IE8 und frühere Versionen der IE-Browser unterstützen diese Eigenschaft nicht.
Lineare Farbverläufe mit CSS3
Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren. Farbstopps sind die Farben, zwischen denen Sie sanfte Übergänge darstellen möchten. Sie können auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Beispiele für lineare Farbverläufe:
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Linearer Farbverlauf - von oben nach unten (standardmäßig)
Das folgende Beispiel zeigt einen linearen Farbverlauf, der von oben beginnt. Er startet mit Rot und geht allmählich in Blau über:
Beispiel
Linearer Gradient - Von oben nach unten:
Selbst ausprobieren »
Linearer Gradient - Von links nach rechts
Das folgende Beispiel zeigt einen linearen Gradienten, der von links beginnt. Er startet mit Rot und geht allmählich in Gelb über:
Beispiel
Linearer Gradient - Von links nach rechts:
Selbst ausprobieren »
Linearer Gradient - Diagonal
Sie können einen diagonalen Gradienten erstellen, indem Sie die horizontalen und vertikalen Startpositionen angeben.
Das folgende Beispiel zeigt einen linearen Gradienten, der von der oberen linken Ecke beginnt (und zur unteren rechten Ecke verläuft). Er startet mit Rot und geht allmählich in Gelb über:
Beispiel
Linearer Gradient - Von links oben nach rechts unten:
Selbst ausprobieren »
Winkel verwenden
Wenn Sie mehr Kontrolle über die Richtung des Farbverlaufs wünschen, können Sie einen Winkel anstelle einer vordefinierten Richtung definieren (to bottom, to top, to right, to bottom right usw.).
Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);
Der Winkel ist der Winkel zwischen der horizontalen Linie und der Farbverlaufslinie, gegen den Uhrzeigersinn gemessen. Mit anderen Worten: 0deg erzeugt einen Farbverlauf von unten nach oben und 90deg erzeugt einen Farbverlauf von links nach rechts.
Beachten Sie jedoch, dass viele Browser (Chrome, Safari, Firefox usw.) den alten Standard verwenden: 0deg erzeugt einen Farbverlauf von links nach rechts und 90deg erzeugt einen Farbverlauf von unten nach oben. Umrechnungsformel:90 - x = yDabei ist x der Standardwinkel und y der nicht standardmäßige Winkel.
Das folgende Beispiel zeigt, wie Winkel bei linearen Farbverläufen verwendet werden:
Beispiel
Linearer Farbverlauf mit einem angegebenen Winkel:
Selbst ausprobieren »
Mehrere Farbstopps verwenden
Das folgende Beispiel zeigt, wie mehrere Farbstopps festgelegt werden:
Beispiel
Ein linearer Farbverlauf von oben nach unten mit mehreren Farbstopps:
Selbst ausprobieren »
Das folgende Beispiel zeigt, wie man einen linearen Farbverlauf mit Regenbogenfarben und Text erstellt:
Beispiel
Selbst ausprobieren »
Transparenz verwenden (transparent)
CSS3-Farbverläufe unterstützen auch Transparenz, mit der sich Ausblendeffekte erzeugen lassen.
Um Transparenz hinzuzufügen, verwenden wir die rgba()-Funktion, um Farbstopps zu definieren. Der letzte Parameter in der rgba()-Funktion kann ein Wert von 0 bis 1 sein, der die Deckkraft der Farbe definiert: 0 bedeutet vollständig transparent, 1 bedeutet vollständig undurchsichtig.
Das folgende Beispiel zeigt einen linearen Farbverlauf, der von links beginnt. Er startet vollständig transparent und geht allmählich in ein vollständig deckendes Rot über:
Beispiel
Ein linearer Farbverlauf von links nach rechts mit Transparenz:
Selbst ausprobieren »
Sich wiederholende lineare Farbverläufe
Die Funktion repeating-linear-gradient() wird für sich wiederholende lineare Farbverläufe verwendet:
Beispiel
Ein sich wiederholender linearer Farbverlauf:
Selbst ausprobieren »
CSS3 radiale Farbverläufe
Radiale Farbverläufe werden durch ihren Mittelpunkt definiert.
Um einen radialen Farbverlauf zu erstellen, müssen Sie außerdem mindestens zwei Farbstopps definieren. Farbstopps sind die Farben, zwischen denen Sie sanfte Übergänge darstellen möchten. Sie können auch den Mittelpunkt des Farbverlaufs, die Form (Kreis oder Ellipse) und die Größe angeben. Standardmäßig ist der Mittelpunkt des Farbverlaufs center (d. h. am Mittelpunkt), die Form ist ellipse und die Größe ist farthest-corner.
Beispiele für radiale Farbverläufe:
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Radialer Farbverlauf - gleichmäßig verteilte Farbstopps (standardmäßig)
Beispiel
Radialer Farbverlauf mit gleichmäßig verteilten Farbstopps:
Selbst ausprobieren »
Radialer Farbverlauf - ungleichmäßig verteilte Farbstopps
Beispiel
Ein radialer Farbverlauf mit ungleichmäßig verteilten Farbstopps:
Selbst ausprobieren »
Form festlegen
Der Parameter shape definiert die Form. Er kann den Wert circle oder ellipse haben. Hierbei bedeutet circle einen Kreis und ellipse eine Ellipse. Der Standardwert ist ellipse.
Beispiel
Radialer Farbverlauf in Form eines Kreises:
Selbst ausprobieren »
Verwendung verschiedener Größen-Schlüsselwörter
Der Parameter size definiert die Größe des Farbverlaufs. Er kann einen der folgenden vier Werte haben:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Beispiel
Radiale Farbverläufe mit unterschiedlichen Größen-Schlüsselwörtern:
Selbst ausprobieren »
Wiederholte radiale Farbverläufe
Die Funktion repeating-radial-gradient() wird für wiederholte radiale Farbverläufe verwendet:
Beispiel
Ein wiederholter radialer Farbverlauf:
Selbst ausprobieren »