Verlaufshintergrund in CSS
In dieser trivialen Anleitung geht es um die Verwendung von CSS-Eigenschaften, die verwendet werden können, um regenbogenähnliche Verlaufshintergründe für HTML-Elemente zu definieren.
CSS-Verläufe
Mit CSS-Verläufen können Sie nahtlose Übergänge zwischen zwei oder mehr festgelegten Farben anzeigen. CSS identifiziert drei verschiedene Farbverlaufstypen:
- Lineare Farbverläufe (bewegt sich nach links, rechts, oben, unten, diagonal)
- Abgerundete Farbverläufe (definiert durch ihren Mittelpunkt)
- CONIC Gradients (dreht sich um einen Mittelpunkt)
Farbverläufe können in Hintergründen und überall dort verwendet werden, wo ein Bild verwendet wird. Farbverläufe können die Notwendigkeit für Bitmap-Grafikbilddateien beseitigen, die zuvor verwendet wurden, um ähnliche Effekte zu erzielen, da sie dynamisch erzeugt werden.
Farbverläufe können auch sofort in der Größe geändert werden und sehen beim Vergrößern besser aus als Bitmap-Bilder, da sie vom Browser generiert werden.
Wir werden Funktionen besprechen, die für alle Farbverlaufstypen gelten, beginnend mit linearen Farbverläufen. Von dort aus gehen wir zu radialen und konischen Farbverläufen über.
Linearer Verlauf
Am besten definieren Sie mindestens zwei Farbstopps, um einen linearen Farbverlauf zu erzeugen. Wir definieren einige der Farben, die wir für einen reibungslosen Übergang benötigen.
Diese Farben werden als Farbstopps bezeichnet. Sie können den Startpunkt und die Richtung (oder einen Winkel) zusammen mit dem Verlaufseffekt angeben.
Syntax - Linearer Gradient:
background-image: linear-gradient(direction, color1, color2, ...);
Es können beliebig viele Farben angegeben werden. Richtung ist auch ein optionales Argument; standardmäßig ist die Richtung linear von oben nach unten.
Die folgende HTML-Seite enthält ein div mit einer Höhe von 100px und einem Hintergrundbild mit Farbverlauf.
<head>
<style>
#myBlock {
height: 100px;
background-image: linear-gradient(yellow, grey);
}
</style>
</head>
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Beachten Sie, dass wir die Richtung des Farbverlaufs nicht angegeben haben, also ist er auf die Richtung von oben nach unten eingestellt, da dies der Wert für die Richtung ist.
Außerdem können wir jede Richtung mit dem Namen oder auch mit dem Winkel angeben. Das folgende Beispiel legt den Farbverlauf von links nach rechts fest.
#myBlock {
height: 100px;
background-image: linear-gradient(to right,blue,pink);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Sie können die Richtung in einer diagonalen Position angeben. Dazu sollten Startpositionen in horizontaler und vertikaler Richtung angegeben werden.
#myBlock {
height: 100px;
background-image: linear-gradient(to bottom right,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Sie können den Richtungswinkel angeben, um mehr Kontrolle über Ihre Farbeinstellungen zu haben.
#myBlock {
height: 100px;
background-image: linear-gradient(160deg,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Positionieren Sie Ihre Farben
Ihre Farbstopps müssen nicht an ihren Standardpositionen bleiben. Sie können die Position jedes einzelnen anpassen, indem Sie ihm einen Wert von null, einem oder zwei Prozent zuweisen.
Die in Prozent angegebenen Start- und Endpunkte einer Position sind 0 % bzw. 100 %. Falls erforderlich, können jedoch Werte außerhalb dieser Bereiche verwendet werden, um das gewünschte Ergebnis zu erzielen.
Wenn Sie keine Position angeben, wird die Position dieses bestimmten Farbstopps automatisch für Sie bestimmt. Die ersten und letzten Farbstopps befinden sich jeweils bei 0 % und 100 %, und alle zusätzlichen Farbstopps befinden sich auf halbem Weg zwischen ihren benachbarten Farbstopps.
Betrachten Sie das folgende Beispiel, in dem wir drei Farben verwendet und ihre Positionen auf drei Arten angegeben haben: eine mit px, eine mit Prozent, und die letzte bleibt so, wie sie ist, damit ihre Position entsprechend festgelegt wird.
#myBlock {
height: 100px;
background: linear-gradient(to right, yellow 28px, red 77%, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Radiale Farbverläufe
Im Gegensatz zu linearen Farbverläufen strahlen radiale Farbverläufe von einem zentralen Punkt nach außen. Die Position dieses zentralen Punktes liegt bei Ihnen, und er kann auch elliptisch oder kreisförmig gemacht werden.
Ähnlich wie lineare Farbverläufe erfordern radiale Farbverläufe nur die Verwendung von zwei Farben. Standardmäßig befindet sich die Mitte des Farbverlaufs an der 50 %-Marke und ist elliptisch, um dem Seitenverhältnis der Box zu entsprechen:
Syntax - Radialer Farbverlauf:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Der folgende CSS-Code erstellt beispielsweise einen radialen Farbverlauf mit drei Farben. Wenn wir keine Position oder Form angeben, werden alle Farben gleichmäßig vom Mittelpunkt aus verteilt.
#myBlock {
height: 100px;
background: radial-gradient(red, yellow, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Dimensionierung radialer Farbverläufe
Bei radialen Farbverläufen können Sie im Gegensatz zu linearen Farbverläufen die Größe angeben. Die Werte nächste Ecke, nächste Seite, am weitesten entfernte Ecke und am weitesten entfernte Seite gehören zu den Optionen, wobei am weitesten entfernte Ecke als Standard dient.
Ellipsen und Kreise haben beide zusätzliche Größenoptionen, einschließlich Länge und Prozentsatz. Die folgenden Beispiele zeigen die verschiedenen Größen mit ihren entsprechenden Ausgängen.
#myBlock {
height: 100px;
background-image: radial-gradient(closest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
#myBlock {
height: 100px;
background-image: radial-gradient(farthest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Kegelförmige Farbverläufe
Konischer Farbverlauf ist die Art von Farbverlauf, bei dem die Farben um einen definierten Mittelpunkt gedreht werden (und nicht von der Mitte ausstrahlen). Kreisdiagramme und Farbräder sind zwei Beispiele für konische Farbverläufe, aber sie können auch verwendet werden, um Schachbrettmuster und einige faszinierendere Effekte zu erstellen.
Die Syntax des konischen Gradienten entspricht der Syntax des radialen Gradienten. Die Farbstopps müssen jedoch nur in Grad- und Prozenteinheiten angegeben werden, nicht aber in absoluten Längen.
Sie müssen auch um den Farbverlaufsbogen und nicht auf der Farbverlaufslinie platziert werden, die aus der Mitte des Farbverlaufs hervorgeht.
Syntax - Kegelgradient:
background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);
Die Standardposition und der Winkel sind jeweils 0 und Mitte.
Beispielsweise werden die Farben des Farbverlaufs gleichmäßig um den Mittelpunkt herum verteilt, wenn kein Grad angegeben wird.
#myBlock {
height: 100px;
background-image: conic-gradient(red, yellow, cyan);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Position von konischen Farbverläufen
Ähnlich wie bei radialen Farbverläufen kann man auch bei konischen Farbverläufen die Position des Mittelpunktes angeben.
Das folgende Codebeispiel gibt die Position des Mittelpunkts sowie den Grad aller Farben an.
#myBlock {
height: 100px;
background-image: conic-gradient(at 10% 40%, cyan 10%, magenta 30%, yellow 50%);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Ändern Sie den Winkelgrad des Farbverlaufs
Die Liste der von Ihnen definierten Farben wird normalerweise gleichmäßig um den Kreis herum verteilt. Um den Anfangswinkel des konischen Gradienten anzugeben, verwenden Sie das Schlüsselwort from und geben Sie den Winkel danach an.
Wir können auch verschiedene Positionen für die Farbstopps angeben, indem wir ihnen einen Winkel oder eine Länge hinzufügen. Das folgende Beispiel definiert den Winkel zum Festlegen des Mittelpunkts des Kegelverlaufs.
#myBlock {
height: 100px;
background-image: conic-gradient(from 48deg, red, orange 40%, yellow 65%, green);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Abschluss
Wir haben mehrere Optionen, mit denen wir den Verlaufshintergrund festlegen können. Wie in allen Beispielen haben wir den Verlaufshintergrund eines div-Elements gesetzt.
In ähnlicher Weise kann dieser Hintergrund mit jedem beliebigen HTML-Element gesetzt werden, sofern es die Anwendung des Hintergrundbildes unterstützt.