Ein radialer Farbverlauf wird mithilfe der Eigenschaft „Hintergrund“ oder „Hintergrundbild“ mit dem Parameter „Radial-Gradient“ erstellt. Im einfachsten Fall benötigen Sie zum Einstellen eines radialen Farbverlaufs nur zwei Parameter: die Start- und Endfarbe. Standardmäßig liegt der Startpunkt in der Mitte. Beispiel 1 zeigt, wie man mit einem radialen Farbverlauf und abgerundeten Ecken etwas schafft, das einer Kugel ähnelt.
Beispiel 1: Farbverlauf
Gradient
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1. Bitte beachten Sie, dass das Beispiel in IE10 und Opera 12 korrekt funktioniert. frühe Versionen Diese Browser unterstützen keine radialen Farbverläufe und funktionieren nicht in Safari 5.1, das das Präfix -webkit erfordert.
Reis. 2. Radialer Gradient
Der Startpunkt des Farbverlaufs kann an einer beliebigen Stelle im Element festgelegt werden, dazu wird zunächst dessen Position festgelegt.
Die Position eines Punktes wird ähnlich wie die Werte der Eigenschaft „Hintergrundposition“ geschrieben, wobei Schlüsselwörter oder verfügbare Maßeinheiten wie Pixel oder Prozentsätze verwendet werden; Nachfolgend finden Sie mögliche Kombinationen.
oben links = links oben = bei 0 % 0 % (in links). obere Ecke);
oben = oben in der Mitte = in der Mitte oben = bei 50 % 0 % (oben in der Mitte);
rechts oben = oben rechts = bei 100 % 0 % (in der oberen rechten Ecke);
links = links in der Mitte = in der Mitte links = bei 0 % 50 % (links und in der Mitte);
in der Mitte = in der Mitte Mitte = bei 50 % 50 % (Mitte) ist der Standardwert;
rechts = rechts in der Mitte = in der Mitte rechts = bei 100 % 50 % (rechts und in der Mitte);
unten links = unten links = bei 0 % 100 % (in der unteren linken Ecke);
unten = unten in der Mitte = in der Mitte unten = bei 50 % 100 % (unten in der Mitte);
unten rechts = rechts unten = bei 100 % 100 % (in der unteren rechten Ecke).
Wenn Sie die Startpunktposition zum Beispiel 1 auf 40px 45px setzen und die zweite Farbe etwas dunkler machen (#0076a5), erhalten Sie einen etwas realistischeren Ball (Abb. 3).
Reis. 3. Ändern des Startpunkts des Farbverlaufs
Es gibt zwei mögliche Formen des radialen Farbverlaufs – Kreis und Ellipse, die sich in ihrem Aussehen unterscheiden. Der Standardwert ist ein elliptischer Farbverlauf.
Der Unterschied zwischen einem kreisförmigen und einem elliptischen Farbverlauf für die Farben #f9e497 und #ffb60f ist in Abb. 4.
Bei einem Element, dessen Breite gleich seiner Höhe ist, wie im Ballbeispiel, ist der Unterschied zwischen den Verlaufstypen nicht erkennbar.
Beispiel 2 zeigt, wie man einen kreisförmigen Farbverlauf mit einem bestimmten Startpunkt erstellt. Um den Kontrast zwischen den Farben zu verbessern, werden drei statt zwei Farbwerte verwendet.
Beispiel 2: Kreisförmiger Farbverlauf
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
Dieses Element hilft, wenn Sie sich der Tatsache bewusst sind, dass Sie absolut keine Ahnung haben, wer Ihnen wie helfen kann. In diesem Moment schlagen wir vor, dass Ihnen niemand helfen kann.
Achten Sie auf die Syntax. Wenn wir eine Verlaufsform mit einer Angabe des Startpunkts kombinieren möchten, kommt zuerst das Schlüsselwort Kreis und dann wird die Position durch ein Leerzeichen getrennt. Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 5.
Reis. 5. Kreisförmiger Farbverlauf
Neben dem Verlaufstyp können Sie auch dessen Größe festlegen, die von den verwendeten Schlüsselwörtern abhängt. Die Größe wird mit einem Leerzeichen nach dem Verlaufstyp (Kreis oder Ellipse) geschrieben.
In der Tabelle 1 listet mögliche Größenwerte mit Beschreibung und Ergebnis für Weiß und Schwarz auf. Code und Typ sind für kreisförmige und elliptische Verläufe angegeben.
Tisch 1. Schlüsselwörter zur Größenänderung des Farbverlaufs
Bedeutung
Code
Beschreibung
Sicht
Hintergrund: radialer Farbverlauf (Kreis auf der nächsten Seite bei 30 Pixel, 20 Pixel, #fff, #000);
Hintergrund: Radialgradient (Ellipse am nächsten bei 30 Pixel, 20 Pixel, #fff, #000);
Die Form des Farbverlaufs entspricht der Seite des Blocks, die ihm am nächsten liegt.
Hintergrund: radial-gradient(Ellipse nächste Ecke bei 30px 20px, #fff, #000);
Die Form des Gradienten wird anhand der Informationen über den Abstand zur nächsten Ecke des Blocks berechnet.
Hintergrund: radialer Farbverlauf (Kreis auf der äußersten Seite bei 30 Pixel, 20 Pixel, #fff, #000);
Hintergrund: radialer Farbverlauf (Ellipse am weitesten entfernt bei 30 Pixel, 20 Pixel, #fff, #000);
Der Farbverlauf erstreckt sich bis zur anderen Seite des Blocks.
am weitesten entfernte Ecke
Hintergrund: radialer Farbverlauf (Kreis am weitesten entfernte Ecke bei 30 Pixel, 20 Pixel, #fff, #000);
Hintergrund: radialer Farbverlauf (Ellipse am weitesten entfernte Ecke bei 30 Pixel, 20 Pixel, #fff, #000);
Die Form des Gradienten wird basierend auf Informationen über den Abstand zur hinteren Ecke des Blocks berechnet.
Für den zentralen Ausgangspunkt scheinen die Steigungen zusammenzufallen. Die Farbverläufe werden jedoch unterschiedlich sein, wenn Sie den Startpunkt in einer Ecke festlegen. Beispiel 3 verwendet einen Wert, der den Startpunkt in Pixel angibt.
Beispiel 3: Verlaufsgröße
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
Inhalt
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 6.
Reis. 6. Verwendung des Werts für die nächstgelegene Ecke
Ähnlich wie bei einem linearen Farbverlauf können Sie mehrere Farben angeben, ihre Position festlegen und scharfe Übergänge zwischen den Farben erstellen. Dazu wird eine beliebige Anzahl von Farben durch Kommas getrennt aufgelistet und hinter dem Farbwert, getrennt durch ein Leerzeichen, steht dessen Position, die in Pixeln oder Prozentsätzen angegeben werden kann. Die Extremwerte 0 % und 100 % müssen nicht geschrieben werden, sie werden automatisch angenommen.
Scharfe Übergänge treten auf, wenn die Position einer Farbe mit der Position einer anderen Farbe übereinstimmt, wie in Beispiel 4 gezeigt. Der Unterschied eines Pixels wird gemacht, um den Übergang ein wenig zu glätten, andernfalls stellt sich heraus, dass es sich um eine „Leiter“ von Pixeln handelt. was nicht sehr schön aussieht.
Beispiel 4. Abrupte Übergänge
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 7.
Reis. 7. Scharfe Übergänge zwischen verschiedenen Farben
Wenn lineare und radiale Farbverläufe mit der Eigenschaft „Hintergrundgröße“ ergänzt werden, erhalten wir eine Vielzahl sich wiederholender Hintergrundbilder, die ohne Verwendung von Bildern erstellt werden.
CSS-Verlauf stellt Übergänge von einer Farbe zur anderen dar.
Verläufe werden mit den Funktionen linear-gradient() und radial-gradient() erstellt.
Der Verlaufshintergrund kann in den Eigenschaften „Hintergrund“, „Hintergrundbild“, „Rahmenbild“ und „Listenstil-Bild“ festgelegt werden.
Reis. 1. Verlaufslinie, Start- und Endpunkte und Verlaufswinkel
Linearer Farbverlauf erstellt mit zwei oder mehr Farben, für die eine Richtung angegeben ist, oder Farbverlaufslinie.
Wenn die Richtung nicht angegeben ist, wird der Standardwert verwendet - von oben nach unten.
Standardmäßig werden Verlaufsfarben gleichmäßig in einer Richtung senkrecht zur Verlaufslinie verteilt.
Hintergrund: linearer Farbverlauf (Winkel/Seite oder Neigung nach Schlüsselwort (Schlüsselwortpaar), erste Farbe, zweite Farbe usw.);
Richtung Der Gradient kann auf zwei Arten angegeben werden: mit Neigungswinkel in Grad Grad, dessen Wert den Neigungswinkel der Linie innerhalb des Elements bestimmt.
Div (Höhe: 200px; Hintergrund: linear-gradient(45deg, #EECFBA, #C5DDE8); )
mithilfe von Schlüsselwörtern nach oben, nach rechts, nach unten, nach links, was jeweils einem Steigungswinkel von 0 Grad, 90 Grad, 180 Grad und 270 Grad entspricht.
Wenn die Richtung durch ein Schlüsselwortpaar angegeben wird, beispielsweise to top left , dann liegt der Startpunkt des Farbverlaufs in der entgegengesetzten Richtung, in diesem Fall unten rechts.
Div (Höhe: 200px; Hintergrund: linearer Farbverlauf (oben links, puderblau, rosa);)
Bei einer ungleichmäßigen Farbverteilung wird die Startposition jeder Farbe durch die Stopppunkte des Farbverlaufs, die sogenannten, angezeigt Die Farbe hört auf. Haltepunkte werden in % angegeben, wobei 0 % der Startpunkt und 100 % der Endpunkt ist, zum Beispiel:
Radialer Farbverlauf Der Unterschied zum linearen Modus besteht darin, dass die Farben von einem Punkt (der Mitte des Farbverlaufs) ausgehen und gleichmäßig nach außen verteilt werden, wodurch die Form eines Kreises oder einer Ellipse entsteht.
Hintergrund: radialer Farbverlauf (Farbverlaufsform/-größe/Mittelposition, erste Farbe, zweite Farbe usw.);
Verlaufsform definiert durch die Schlüsselwörter „circle“ oder „ellipse“. Wenn keine Form angegeben ist, ist der radiale Farbverlauf standardmäßig eine Ellipsenform.
Div (Höhe: 200px; Hintergrund: radial-gradient(white, #FFA9A1); )
Mittelposition wird mithilfe der Schlüsselwörter angegeben, die in der Eigenschaft „background-position“ verwendet werden, gefolgt vom Präfix „at“. Wenn die Mittelposition nicht angegeben ist, wird der Standardwert in der Mitte verwendet.
Div (Höhe: 200px; Hintergrund: radial-gradient(at top, #FEFFFF, #A7CECC); )
Ein Wertepaar, angegeben in den Längeneinheiten % , em oder px, kann die Größe des elliptischen Farbverlaufs steuern. Der erste Wert gibt die Breite der Ellipse an, der zweite die Höhe.
Div (Höhe: 200px; Hintergrund: radial-gradient(40% 50%, #FAECD5, #CAE4D8); )
Verlaufsgröße mithilfe von Schlüsselwörtern spezifiziert. Der Standardwert ist die am weitesten entfernte Ecke.
div (Höhe: 200px; Hintergrund: radialer Farbverlauf(Kreis am weitesten entfernte Ecke bei 100px 50px, #FBF2EB, #352A3B); )
Mithilfe eines radialen Farbverlaufs können Sie realistische dreidimensionale Formen wie Kugeln und Knöpfe erstellen.
Zusätzlich zu den linearen und radialen Verläufen gibt es die Gradientenwiederholung, die mit den Funktionen „repeating-linear-gradient()“ bzw. „repeating-radial-gradient()“ angegeben wird. Ein Hintergrund mit sich wiederholenden Farbverläufen sieht unordentlich aus. Daher wird empfohlen, die nächste Farbe dort zu beginnen, wo die vorherige aufgehört hat, um so Streifenmuster zu erzeugen.
5. Kombination aus Farbverlauf und Hintergrundbild
Durch die Kombination eines Farbverlaufs und eines Bildes können Sie interessante Effekte erzielen. Für einen Farbverlauf müssen Sie durchscheinende Farben verwenden, damit das Bild sichtbar bleibt.
Die CSS-Funktion radial-gradient() wird entlang ihres Radius positioniert und erstreckt sich von der Mitte des Elements in einer kreisförmigen oder elliptischen Form nach außen, wobei die Farben des Farbverlaufs gleichmäßig über den Raum des Elements verteilt sind.
Das Prinzip der Erstellung radialer Farbverläufe ähnelt dem Erstellen linearer Farbverläufe (linear-gradient()). Dazu müssen Sie lediglich die Startfarbe angeben – sie befindet sich in der Mitte des Farbverlaufs und die Endfarbe, die sich befindet am Ende des Farbverlaufs.
Mehr zum Arbeiten mit Farbverläufen erfahren Sie in den Artikeln „“ und „“. Bitte beachten Sie, dass die Artikel die Feinheiten der Arbeit mit alten Browsern hervorheben und zahlreiche Beispiele liefern.
Browserunterstützung
Funktion
Oper
IExplorer
Rand
radial-gradient()
26.0 10.0 -webkit-
16.0 3.6 -moz-
12.1 11.1 -Ö-
6.1 5.1 -webkit-
10.0
12.0
CSS-Syntax:
Hintergrundbild / Hintergrund: Radialgradient ([Schlüsselwort Form (oder Größe)] an der Position x-Achse y-Achse, Farbe 1 – Stopp 1, . . . , Farbe n – Stopp n);
Bilden
Elliptische Form wird durch den Ellipsenwert definiert, der der Standardwert ist (keine Angabe erforderlich), und die Kreisform wird durch den Kreiswert definiert.
Stichwort
Die Steigung wird anhand der Entfernung berechnet nahe/ferne Seite, oder nächste/fernste Ecke Element.
Bedeutung
Beschreibung
nächstgelegene Seite
Bei runden Farbverläufen wird der Farbverlauf anhand des Abstands zur nächstgelegenen Seite des Elements von seiner Mitte berechnet ( x-Achse oder y-Achse) und zu den nächstgelegenen Parteien ( x-Achse Und y-Achse), wenn der Farbverlauf die Form einer Ellipse hat. Hintergrundbild: radialer Farbverlauf (kreisnahste Seite bei 60 % 60 %, Pflaume, Schwarz, Orange); Hintergrundbild: Radialgradient (Ellipse, nächste Seite bei 60 %, 60 %, Pflaume, Schwarz, Orange);
nächste Ecke
Der Farbverlauf wird so gestreckt, dass er durch die Ecke des Elements verläuft, die der Mitte am nächsten liegt (die Größe wird basierend auf dem Abstand zur nächsten Ecke des Elements berechnet). Hintergrundbild: Radialer Farbverlauf (Kreis nächste Ecke bei 60 % 50 %, Pflaume, Schwarz, Orange);
Hintergrundbild: radialer Farbverlauf (nächste Ecke der Ellipse bei 60 % 50 %, Pflaume, Schwarz, Orange);
am weitesten entfernte Seite
Bei runden Farbverläufen wird der Farbverlauf anhand des Abstands zur anderen Seite des Elements von seiner Mitte berechnet ( x-Achse oder y-Achse) und zu den nächstgelegenen Parteien ( x-Achse Und y-Achse), wenn der Farbverlauf die Form einer Ellipse hat. Hintergrundbild: Radialer Farbverlauf (Kreis auf der äußersten Seite bei 100 % 50 %, Pflaume, Schwarz, Orange);
Hintergrundbild: radialer Farbverlauf (Ellipse am weitesten entfernt bei 100 % 50 %, Pflaume, Schwarz, Orange);
am weitesten entfernte Ecke
Der Farbverlauf wird so gestreckt, dass er durch die Ecken des Elements verläuft, die am weitesten von der Mitte entfernt sind (die Größe wird abhängig vom Abstand zur entferntesten Ecke des Elements berechnet). Dies ist der Standardwert.Hintergrundbild: Radialer Farbverlauf (Kreis am weitesten in der Ecke bei 60 %, 60 %, Pflaume, Schwarz, Orange);
Hintergrundbild: radialer Farbverlauf (Ellipse, am weitesten entfernte Ecke bei 60 % 60 %, Pflaume, Schwarz, Orange);
Größe
Legt die Größe der Verlaufsform fest. Es ist nicht erforderlich, die Kreis- oder Ellipsenwerte anzugeben. verboten zu verwenden Stichworte wenn die Größe angegeben ist. Wenn Sie angeben ein Wert, dann wird es vom Browser als angesehen . Wenn Sie angeben zwei Bedeutungen, Das erster Wert wird vom Browser als berücksichtigt horizontaler Radius, A zweite Bedeutung Wie Vertikalradius für elliptisches Element.
Ich mache Sie darauf aufmerksam Sie dürfen keine Prozentwerte verwenden, wenn Sie nur einen Wert angeben(Radius für rundes Element), wenn verwendet zwei Bedeutungen(für elliptischen Gradienten) Es ist erlaubt, diese Werte in Prozent anzugeben.
Position
Die Startposition des radialen Farbverlaufs wird durch das Schlüsselwort -center bestimmt, kann aber mit geändert werden Längeneinheiten(Zum Beispiel: px oder em), Prozentwerte Und Schlüsselwörter, die in verwendet werden CSS-Eigenschaft Hintergrundposition ist für die Position (Position) des Hintergrundbilds verantwortlich.
Bedeutung
Beschreibung
links oben linke Mitte links unten rechts oben rechte Mitte rechts unten Mitte oben Mitte Mitte Mitte unten
Legt die Position des Bildes fest. Der erste Wert ist die horizontale Position und der zweite Wert ist die vertikale Position. Wenn Sie nur ein Schlüsselwort angeben, lautet der andere Wert „center“.
x%y%
0% 0%
(Dies ist der Standardwert). In der unteren rechten Ecke 100% 100%.
Wenn nur ein Wert angegeben ist, wird der andere Wert angegeben 50%.
x y
Legt die Position des Bildes fest. Der erste Wert ist die horizontale Position und der zweite Wert ist die vertikale Position. Die obere linke Ecke hat 0 0.
Werte können in Pixeln oder anderen CSS-Einheiten angegeben werden. Wenn nur ein Wert angegeben ist, wird der andere Wert angegeben 50%.
Du kannst teilen Interesse Und Einheiten.
Farbe
Es dürfen nicht nur „vordefinierte Farben“ verwendet werden, sondern auch beliebige „“ - hexadezimal(VERHEXEN), RGB/-A- und HSL/-A-Farbwerte.
Stoppen
Werte Haltepunkte (Die Farbe hört auf) sind in angegeben Längeneinheiten(Zum Beispiel - px oder em) und in Prozentwerte. Der Haltepunkt teilt dem Browser mit, dass der Radiusverlauf die angegebene Farbe um den angegebenen Wert erreichen und reibungslos zur nächsten Farbe übergehen soll, sofern vorhanden.
Anwendungsbeispiel
Schauen wir uns die radialen Verläufe kreisförmiger und elliptischer Formen an und sehen wir uns anhand des folgenden praktischen Beispiels an, worin der Unterschied besteht:
Beispiel für die Verwendung radialer Farbverläufe
In diesem Beispiel haben wir vier Blöcke erstellt und ihnen radiale Farbverläufe gegeben. Die oberen Blöcke haben elliptische Form, und die unteren Blöcke runde Form.
Schauen wir uns ein Beispiel für die Positionierung eines radialen Farbverlaufs an.
Beispiel für die Positionierung radialer Farbverläufe
bei 5px 45px
class = "test2" > bei 50 % Spitze
class = "test3" > oben links
bei 0 % unten
class = "test5" > unten in der Mitte
class = "test6" > bei 100 % 100 %
In diesem Beispiel haben wir erstellt sechs Blöcke mit unterschiedlichen Formen von Farbverläufen (kreisförmig und elliptisch) und positionierte den Farbverlauf für jeden Block unterschiedlich und gab die Werte in an Pixel, Prozent und nutzen Schlüsselwörter.
Bitte beachten Sie, dass Sie den Unterschied zwischen einem kreisförmigen und einem ellipsenförmigen Farbverlauf nicht erkennen können, wenn standardmäßig ein radialer Farbverlauf in der Mitte positioniert ist und das Element eine quadratische Form hat.
Schauen wir uns ein Beispiel für die Verwendung radialer Gradientenstopppunkte an:
In diesem Beispiel haben wir erstellt sechs Blöcke: drei obere Blöcke unterscheiden sich von drei tiefer nur durch Farbverlaufsform, Die Kernpunkte sind die gleichen:
Erster und vierter Block – zweifarbiger Farbverlaufrote Farbe, was sich sanft in verwandelt Grün und belegt den Rest des Elements.
Zweiter und fünfter Block – drei Farbverlauf, in dem 10 % des Zentrums belegt sind rote Farbe, was sich sanft in verwandelt Grün, mit einem Haltepunkt von 50 %, geht es wiederum fließend in über Blau, das den Rest des Elements einnimmt.
Dritter und sechster Block – drei Farbverlauf, in dem 50 % des Zentrums belegt sind rote Farbe, was sich sanft in verwandelt Grün, mit einem Haltepunkt von 85 %, geht wiederum fließend in über Blau, das den gesamten verbleibenden kleinen Teil des Elements einnimmt.
Schauen wir uns an, wie man die Größe eines radialen Farbverlaufs in CSS steuert.
Beispiel für die Dimensionierung radialer Farbverläufe
In diesem Beispiel haben wir drei Blöcke erstellt:
Erster Block- wir haben angegeben ein Wert 50px , was vom Browser als interpretiert wurde Radius für kreisförmigen Gradienten. Für den Farbverlauf angegeben 7 Farben. Beachten Sie, dass die äußerste Farbe den verbleibenden Bereich ausfüllt.
Zweiter Block- wir haben angegeben zwei Bedeutungen in Prozent: erster Wert - horizontaler Radius, A zweite Bedeutung - vertikaler Radius für einen elliptischen Gradienten. Für den Farbverlauf angegeben 8 Farben. Bitte beachten Sie, dass wir als endgültige Farbe Weiß angegeben haben, das den restlichen Bereich ausfüllte(Eine Möglichkeit besteht darin, nur die Verlaufsform beizubehalten).
Dritter Block- wir haben angegeben zwei Bedeutungenin Längeneinheiten (px Und em): erster Wert - horizontaler Radius, A zweite Bedeutung - vertikaler Radius für ein elliptisches Element. Für den Farbverlauf angegeben 7 Farben.
Radiale Farbverläufe werden anders gerendert als lineare. Wenn lineare Farben senkrecht zu der Linie angeordnet sind, die die Richtung vorgibt, weichen radiale Farben von einem bestimmten Mittelpunkt ab und der Farbverlauf kann die Form eines Kreises oder einer Ellipse annehmen.
Für den einfachsten Farbverlauf reicht es, nur die Farben festzulegen:
Standardmäßig liegt der Mittelpunkt des Farbverlaufs in der Mitte, der Farbverlauf hat die Form einer Ellipse:
Zusätzlich zu den Farben können Sie Form, Position und Größe des Farbverlaufs festlegen. Die Parameter werden kombiniert und verhalten sich komplexer als bei linearen Verläufen.
Bilden(die endgültige Form des Farbverlaufs) kann ein Kreis oder eine Ellipse sein. Der Standardwert ist eine Ellipse. Der Farbverlauf nimmt tendenziell den gesamten freien Platz des Elements ein und dehnt sich bei Bedarf aus.
Damit der Farbverlauf die Form eines Kreises hat, muss dies explizit mit dem Schlüsselwort „circle“ angegeben werden.
Wenn die Form nicht angegeben ist, aber die Größe angegeben ist, gibt ein Wert den Radius des Kreises an; wenn es zwei Werte gibt, nimmt der Farbverlauf die Form einer Ellipse an. Wenn Bemaßungen vorhanden sind, wird die explizite Angabe der Verlaufsform ignoriert.
Position bestimmt, wo es sich befindet Center Gradient. Es werden die gleichen Schlüsselwörter wie für den linearen Farbverlauf verwendet, jedoch mit dem Präfix at: at top , at right , at bottom , at left und at center sind die Standardwerte.
Sie können auch kombiniert werden, um den Farbverlauf auf einer bestimmten Seite zu positionieren, zum Beispiel: rechts oben – in der oberen rechten Ecke.
Unten sehen Sie, wie die verschiedenen Positionen funktionieren:
Sie können auch die genaue Position des Farbverlaufs festlegen, beispielsweise auf 20 % 50 % oder auf 10 Pixel 150 Pixel.
Größe bestimmt die Abmessungen der endgültigen Verlaufsform. Bei elliptischen Verläufen können Werte als Prozentsätze angegeben werden, bei kreisförmigen jedoch nicht.
Wenn ein Wert angegeben wird, wird dieser als Radius des kreisförmigen Farbverlaufs betrachtet. Wenn zwei Werte angegeben werden, gilt der erste als horizontaler Radius der Ellipse, der zweite als vertikaler Radius.
Nachfolgend finden Sie Beispiele für kreisförmige und elliptische Farbverläufe. Die Form der Figur wird durch die angegebenen Maße bestimmt:
Sie können auch Schlüsselwörter verwenden:
Nächstliegende Seite – Der Farbverlauf endet am Rand des Elements, das der Mitte des Farbverlaufs am nächsten liegt. Handelt es sich um eine Ellipse, berührt der Farbverlauf alle Ränder des Elements. am weitesten entfernte Seite – der Farbverlauf endet am äußersten Rand des Elements. Handelt es sich um eine Ellipse, berührt der Farbverlauf alle Ränder des Elements. nächstgelegene Ecke – Die endgültige Form wird so gestreckt, dass sie durch die Ecke des Elements verläuft, die der Mitte des Farbverlaufs am nächsten liegt. Wenn die endgültige Form eine Ellipse ist, wird der Farbverlauf über die gesamte Form ausgedehnt. Mit diesem Parameter füllt der Farbverlauf die gesamte Form aus und reicht teilweise über deren Grenzen hinaus. Farthest-Corner – ähnlich wie Closest-Corner, nur dass die Endform durch die Ecke verläuft, die am weitesten von der Mitte des Farbverlaufs entfernt ist. Standardwert.
Bei einigen Farbverläufen wurde eine untere Position hinzugefügt, um die Aktion des Codes besser erkennen zu können:
Ein radialer Gradient kann auch wiederholt werden – das ist Repeating-Radial-Gradient .
Wie bei einem linearen Farbverlauf wird ein sich wiederholender Farbverlauf nicht sehr sauber gerendert.
Durch die Kombination mehrerer Hintergründe mit unterschiedlichen Parametern können Sie erstaunliche Dinge erhalten:
Wenn Sie beim Erstellen von Mustern relative Einheiten (em, %) anstelle absoluter Einheiten (px) verwenden, kann die Größe der resultierenden Muster dann einfach angepasst werden, indem nur die Schriftgröße geändert wird.
Hintergrund mit Farbverlauf
Mit CSS-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.
Radiale Gradienten (definiert durch ihren Mittelpunkt)
CSS lineare Farbverläufe
Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren. Farbstopps sind die Farben, die Sie erstellen möchten fließende Übergänge zwischen ihnen. Sie können außerdem einen Startpunkt und eine Richtung (oder einen Winkel) sowie einen Verlaufseffekt angeben.
Wenn Sie mehr Kontrolle über die Richtung des Farbverlaufs haben möchten, können Sie anstelle vordefinierter Richtungen (unten, oben, rechts, links, unten rechts usw.) einen Winkel definieren.
Notiz:Internet Explorer 9 und frühere Versionen unterstützen keine Farbverläufe.
"/> Demo im Editor ansehen
Transparenz nutzen
CSS-Verläufe unterstützen auch Transparenz, mit der sich Überblendungseffekte erzeugen lassen.
Um Transparenz hinzuzufügen, verwenden wir die Funktion RGBA(), um Farbstopps zu definieren. Der letzte Parameter in der Funktion RGBA() kann ein Wert zwischen 0 und 1 sein und bestimmt die Transparenz der Farbe: 0 bedeutet volle Transparenz, 1 bedeutet volle Farbe (keine Transparenz).
Das folgende Beispiel zeigt einen linearen Farbverlauf beginnend von links. Es beginnt völlig transparent und geht dann in eine volle rote Farbe über:
Reis. 1. Verlaufslinie, Start- und Endpunkte und Verlaufswinkel 
