Farbverläufe

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen CSS3-Farbverläufe (Cascading Stylesheets, Level 3) in jeder Eigenschaft, die Bilder akzeptiert, wie z. B. der background-image-Eigenschaft (plus image-Wert der background-Kompakteigenschaft), der list-style-image-Eigenschaft und generierten Inhalten. Farbverläufe agieren wie im Abschnitt "Farbverläufe" des CSS3-Moduls für Bildwerte und ersetzte Inhalte angegeben, der sich zum Zeitpunkt der Dokumenterstellung in der Empfehlungskandidatenphase befindet.

Farbverläufe sind Bilder, die langsam von einer Farbe in eine andere übergehen. Internet Explorer 10 unterstützt lineare, kreisförmige und elliptische CSS3-Farbverläufe, die alle durch eine Farbverlaufszeile und mindestens zwei Beendigungspunkte festgelegt sind. Jeder Beendigungspunkt hat seine eigene Farbe, und Windows Internet Explorer füllt den Bereich zwischen den einzelnen Punktsätzen mit einem fortlaufenden Farbübergang von einer Farbe zur anderen.

Lineare Farbverläufe

Bei einem linearen Farbverlauf gehen die Farben entlang einer Linie ineinander über. Zum Erstellen linearer Farbverläufe geben Sie zuerst eine Farbverlaufslinie, der der Farbverlauf folgen soll, und dann zwei oder mehr Beendigungspunkte für die Farben, durch Kommata voneinander getrennt, an. Die grundlegende Syntax für einen linearen Farbverlauf sieht wie folgt aus:

linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FunktionBeschreibung

linear-gradient()

Gibt einen linearen Farbverlauf durch Festlegung einer Farbverlaufslinie und mindestens zwei Farbmarkierungen und Offsets an.

Die möglichen Werte für die Eigenschaft sind:

<angle>

Optional. Der Winkel, in dem die Farbverlaufslinie verlaufen soll, angegeben durch eine Ziffer und eine Winkeleinheit (z. B. "deg").

"0deg" verweist aufwärts, und positive Winkel erhöhen sich im Uhrzeigersinn. Entsprechend verweist "90deg" nach rechts, "180deg" nach unten usw.

Wenn kein Winkel angegeben wird, beginnt die Farbverlaufslinie in der Ecke oder an der Seite, die der durch <side-or-corner> angegebenen Ecke oder Seite gegenüber liegt.

<side-or-corner>

Optionaler Wert, der eine Ecke oder Seite als Ende für den Farbverlauf angibt. Der Wert beginnt mit "to", gefolgt von einem oder zwei der folgenden Schlüsselwörter. Mit einem Schlüsselwort wird eine Seite festgelegt und mit zwei Schlüsselwörtern eine Ecke.

  • Die folgenden Werte können nur für den ersten Wert verwendet werden:
    • left  Gibt die linke Seite für das Ende des Farbverlaufs an.
    • right  Gibt die rechte Seite für das Ende des Farbverlaufs an.
  • Die folgenden Werte können nur für den zweiten Wert verwendet werden:
    • top  Gibt an, dass der Farbverlauf oben endet.
    • bottom  Gibt an, dass der Farbverlauf unten endet.
  • Wenn Sie kein Schlüsselwort und keinen Winkel angeben, wird "to bottom" verwendet.
<color-stop>

Es sind mindestens zwei Farbmarkierungen erforderlich. Jede Farbmarkierung besitzt eine oder zwei Komponenten – eine Farbkomponente und eine optionale Positionskomponente.

Die erste Komponente definiert die Farbkomponente einer Markierung für den Farbverlauf. Jeder Markierung ist eine eigene Farbe zugeordnet, und der Bereich zwischen den einzelnen Markierungen wird mit einem fortlaufenden Übergang zwischen diesen beiden Farben ausgefüllt. Dieser Wert kann jeder unterstützte Farbwert sein.

Jeder Markierung kann optional ein Prozentwert oder ein unterstützter Längenwert zugeordnet werden, der angibt, wo die Farbmarkierung an der Farbverlaufslinie platziert werden soll. "0 %" (oder "0px", "0em"usw.) gibt die Startmarkierung (oder die Seite) an, und "100 %" die Endmarkierung (oder die Seite).

 

Der folgende lineare Farbverlauf (als Argument für die background-image-Eigenschaft genutzt) hat drei Farbmarkierungen:

  • Die erste Farbmarkierung ist in der oberen rechten Ecke und definiert eine Farbverlaufslinie, die sich bis zur unteren linken Ecke erstreckt. Die erste Markierung ist ein gelber Schatten.
  • Die zweite Farbmarkierung ist in der Mitte der Farbverlaufslinie und ist ein grüner Schatten.
  • Die letzte Farbmarkierung kommt nach 80% der Farbverlaufslinie und ist ein blauer Schatten. Von dieser Markierung bis zum Ende der Farbverlaufslinie (zwischen 80% und 100%) bleibt dieser blaue Schatten als Farbe erhalten.

Die Farbverlaufslinie beginnt in der oberen rechten Ecke des Rechtecks und endet unten links. Der tatsächliche Winkel hängt von den Abmessungen des Elements ab, das mit dem Farbverlauf gefüllt werden soll.

Beispiel für einen linearen Farbverlauf beginnend oben rechts

background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);


Wenn Sie diesen Farbverlauf in einem Feld derselben Größe (250 Pixel × 150 Pixel) mit einem Winkel verwenden möchten, geben Sie Folgendes an:


background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Natürlich ändert sich das Aussehen der beiden Farbverläufe bei einer anderen Größe des ausgefüllten Bereichs. Beachten Sie dies beim Festlegen von Farbverläufen. Der erste Farbverlauf (mit Angabe von "to bottom left") wird hier in einem Feld der Größe 450 x 150 Pixel dargestellt.

Darstellung eines linearen Farbverlaufs in einem breiteren Rechteck

Der zweite Farbverlauf (mit Angabe von "210deg") wird hier in einem Feld derselben Größe dargestellt.

Darstellung eines weiteren Farbverlaufs in einem breiten Rechteck mit mehr Gelb

Radiale Farbverläufe

Im Gegensatz zu linearen Farbverläufen, die sich von einem Ende einer Linie zum anderen bewegen, gehen radiale Farbverläufe von einem einzigen Punkt aus, von wo sie sich dann langsam kreisförmig oder elliptisch nach außen ausbreiten. Wenn Sie einen radialen Farbverlauf angeben möchten, definieren Sie zunächst einen Mittelpunkt, dann die Größe und Form (bei einer Ellipse) des fertigen Kreises bzw. der fertigen Ellipse — oder 100 % — und anschließend die dazwischen liegenden Farbmarkierungen, durch Kommata voneinander getrennt, an. Die grundlegende Syntax für einen radialen Farbverlauf sieht wie folgt aus:

radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FunktionBeschreibung

radial-gradient()

Wenn Sie einen radialen Farbverlauf angeben möchten, definieren Sie zunächst einen Mittelpunkt, dann die Größe und Form (bei einer Ellipse) des fertigen Kreises bzw. der fertigen Ellipse – oder 100 % – und anschließend die dazwischen liegenden Farbmarkierungen durch Kommas voneinander getrennt.

Die möglichen Werte für die Eigenschaft sind:

<shape>

Optionaler Wert, der den Rand des Farbverlaufs angibt. Wenn dieser Wert nicht angegeben wird, ist dies ein Kreis, sofern der size-Parameter ein einzelner Längenwert ist, andernfalls eine Ellipse.

  • ellipse  Gibt einen Farbverlauf in Form einer Ellipse an.
  • circle  Gibt einen Farbverlauf in Form eines Kreises an.
<size>

Optionaler Wert, der die Größe der finalen Form für den Farbverlauf angibt. Wenn dieser Wert nicht angegeben wird, lautet der Standardwert farthest-corner.

  • <length(s)>  

    Ein oder zwei durch Leerzeichen voneinander getrennte Längenwerte oder zwei Prozentwerte.

    Wenn nur ein Längenwert angegeben wird, kennzeichnet dieser den Radius des Kreises.

    Werden zwei Werte (Länge oder Prozentsatz) angegeben, stellt der erste Wert den horizontalen Radius und der zweite den vertikalen Radius dar.

    Prozentwerte gelten relativ zur jeweiligen Größe des Farbverlaufsfelds. Mit Prozentwerten kann nur die Größe elliptischer Farbverläufe, aber nicht die Größe kreisförmiger Farbverläufe angegeben werden.

    Negative Werte sind ungültig.

  • closest-side  Bei kreisförmigen Farbverläufen gibt dieser Wert an, dass die Form am Ende ein Kreis ist, der so groß ist, dass er nahe dem Mittelpunkt auf die Seite des Felds trifft. Bei elliptischen Farbverläufen ist die Form eine Ellipse, die so groß ist, dass sie nahe dem Mittelpunkt genau auf die vertikale und horizontale Seite des Felds trifft.
  • closest-corner  Passt die Form des Farbverlaufs in der Größe so an, dass sie mit dem Mittelpunkt genau auf die nächstgelegene Ecke des Felds trifft. Bei elliptischen Farbverläufen weist die Form des Farbverlaufs dasselbe Verhältnis von Breite zu Höhe auf, das sie auch hätte, wenn closest-side angegeben wäre.
  • farthest-side  Vergleichbar mit closest-side, allerdings wird die Form des Farbverlaufs in ihrer Größe so angepasst, dass sie am vom Mittelpunkt am weitesten entfernten Punkt auf die Seite des Felds (bei kreisförmigen Farbverläufen) oder auf die am weitesten entfernte vertikale und horizontale Seite trifft (bei elliptischen Farbverläufen).
  • farthest-corner  Passt die Form des Farbverlaufs in der Größe so an, dass sie mit dem Mittelpunkt genau auf die am weitesten entfernte Ecke des Felds trifft. Bei elliptischen Farbverläufen weist die Form des Farbverlaufs dasselbe Verhältnis von Breite zu Höhe auf, das sie auch hätte, wenn farthest-side angegeben wäre.
<position>

Optionaler Wert, der die Mitte des Farbverlaufs angibt. Dieser Wert kann dieselben Werte wie die background-position-Eigenschaft annehmen. Wenn dieser Wert nicht angegeben wird, lautet der Standardwert center.

<color-stop>

Es sind mindestens zwei Farbmarkierungen erforderlich. Jede Farbmarkierung besitzt eine oder zwei Komponenten – eine Farbkomponente und eine optionale Positionskomponente.

Die erste Komponente definiert die Farbkomponente einer Markierung für den Farbverlauf. Jeder Markierung ist eine eigene Farbe zugeordnet, und der Bereich zwischen den einzelnen Markierungen wird mit einem fortlaufenden Übergang zwischen diesen beiden Farben ausgefüllt. Dieser Wert kann jeder unterstützte Farbwert sein.

Die zweite Komponente ist ein optionaler Prozent- oder Dezimalwert, der angibt, wo die Farbmarkierung am Farbverlaufsstrahl (ähnlich der Farbverlaufslinie bei linear-gradient, aber vom Mittelpunkt nach außen) platziert werden soll. "0 %" gibt den Anfang des Farbverlaufsstrahls an, und "100%" gibt den Punkt an, an dem der Farbverlaufsstrahl den Rand schneidet. Der Wert "20 %" gibt z. B. an, dass die Farbmarkierung bei 20 % ab dem Anfang des Farbverlaufsstrahls platziert werden soll. Negative Werte sind möglich und geben an, dass sich die angegebene Farbe für diesen Wert an der Mitte des Übergangs zur nächsten Farbe in der Mitte des Farbverlaufs befindet, sodass die sichtbare Farbe in der Mitte zwischen der angegebenen Farbe und der nächsten Farbe liegt. Auch Werte größer als 100 % sind möglich. Diese geben eine Position mit entsprechend größerem Abstand von der Mitte des Farbverlaufs an.

 

Häufig kann mit unterschiedlicher Syntax für den radialen Farbverlauf dasselbe Ergebnis erzielt werden. So erzeugen z. B. die folgenden drei Beispiele bei einem div-Element der Größe 250×150 Pixel das hier gezeigte Bild.

Einfacher elliptischer Farbverlauf in einem Rechteck der Größe 250 x 150-Pixel


background-image: radial-gradient(yellow, blue);

background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);

background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);

Das folgende Beispiel ähnelt dem vorherigen Beispiel, es wird aber ein kreisförmiger Farbverlauf angegeben.

Einfacher kreisförmiger Farbverlauf in einem Rechteck der Größe 250 x 150-Pixel

background-image: radial-gradient(circle, yellow, blue);

Im folgenden Beispiel wurden drei Farben angegeben. Alle Deklarationen ergeben das gezeigte Bild.

Elliptischer Farbverlauf mit drei Farbmarkierungen

background-image: radial-gradient(#FFF133, #16D611, #00A3EF);

background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);

Sie können den Mittelpunkt des radialen Farbverlaufs natürlich auch an andere Stellen als die Mitte des Farbverlaufsfelds versetzen. Mit den Schlüsselwörtern closest-side oder farthest-side können Sie die Größe des Farbverlaufs so festlegen, dass der Rand entweder auf die am weitesten entfernte oder auf die am nächsten liegende Seite des Farbverlaufsfelds trifft.

Radialer Farbverlauf mit drei Farben, der von der unteren linken Ecke ausgeht

background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);

Die folgenden Beispiele legen den Mittelpunkt des Farbverlaufs auf 40 Pixel von der linken Seite und 50 Pixel von der oberen Seite des Farbverlaufsfelds entfernt fest. Im ersten Beispiel wird closest-side verwendet, sodass der Rand des Farbverlaufs durch die am nächsten liegenden Seiten des Farbverlaufsfelds definiert wird — in diesem Fall die obere und die linke Seite.

Kleiner, dreifarbiger elliptischer Farbverlauf in der oberen linken Ecke eines Farbverlaufsfelds

background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

Im zweiten Beispiel wird farthest-side verwendet, sodass der Rand des Farbverlaufs durch die am weitesten entfernt liegenden Seiten des Farbverlaufsfelds definiert wird — in diesem Fall die untere und die rechte Seite.

Großer, dreifarbiger elliptischer Farbverlauf, der an der rechten und unteren Seite des Farbverlaufsfelds endet

background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

Wenn Sie closest-side oder farthest-side bei kreisförmigen Farbverläufen verwenden, wird die Größe von der am nächsten gelegenen Seite des Farbverlaufsfelds bestimmt. Beim folgenden closest-side-Beispiel ist dies die linke Seite.

Kleiner, dreifarbiger kreisförmiger Farbverlauf in der oberen linken Ecke eines Farbverlaufsfelds

background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Beim folgenden farthest-side-Beispiel wird die Größe des kreisförmigen Farbverlaufs von der rechten Seite des Farbverlaufsfelds bestimmt.

Großer, dreifarbiger kreisförmiger Farbverlauf, der an der rechten Seite des Farbverlaufsfelds endet

background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Wiederholen von Farbverläufen

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen auch sich wiederholende lineare und radiale Farbverläufe. Die Syntax der Eigenschaften jedes sich wiederholenden Farbverlaufs ist identisch mit der Syntax des entsprechenden sich nicht wiederholenden Farbverlaufs.

Die grundlegende Syntax für einen sich wiederholenden linearen Farbverlauf sieht wie folgt aus:

repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FunktionBeschreibung

repeating-linear-gradient()

Gibt einen sich wiederholenden linearen Farbverlauf durch Festlegung von einer Farbverlaufslinie und mindestens zwei Farbmarkierungen und Offsets an.

Die möglichen Werte für die Eigenschaft sind:

<angle>

Optional. Der Winkel, in dem die Farbverlaufslinie verlaufen soll, angegeben durch eine Ziffer und Winkeleinheit (z. B. "deg").

"0deg" verweist aufwärts, und positive Winkel erhöhen sich im Uhrzeigersinn. Entsprechend verweist "90deg" nach rechts, "180deg" nach unten usw.

Wenn kein Winkel angegeben wird, beginnt die Farbverlaufslinie in der Ecke oder an der Seite, die der durch <side-or-corner> angegebenen Ecke oder Seite gegenüber liegt.

<side-or-corner>

Optionaler Wert, der eine Ecke oder Seite als Ende für den Farbverlauf angibt. Der Wert beginnt mit "to", gefolgt von einem oder zwei der folgenden Schlüsselwörter. Mit einem Schlüsselwort wird eine Seite festgelegt und mit zwei Schlüsselwörtern eine Ecke.

  • Die folgenden Werte können nur für den ersten Wert verwendet werden:
    • left  Gibt die linke Seite für das Ende des Farbverlaufs an.
    • right  Gibt die rechte Seite für das Ende des Farbverlaufs an.
  • Die folgenden Werte können nur für den zweiten Wert verwendet werden:
    • top  Gibt an, dass der Farbverlauf oben endet.
    • bottom  Gibt an, dass der Farbverlauf unten endet.
  • Wenn Sie kein Schlüsselwort und keinen Winkel angeben, wird "to bottom" verwendet.
<color-stop>

Es sind mindestens zwei Farbmarkierungen erforderlich. Jede Farbmarkierung besitzt eine oder zwei Komponenten – eine Farbkomponente und eine optionale Positionskomponente.

Die erste Komponente definiert die Farbkomponente einer Markierung für den Farbverlauf. Jeder Markierung ist eine eigene Farbe zugeordnet, und der Bereich zwischen den einzelnen Markierungen wird mit einem fortlaufenden Übergang zwischen diesen beiden Farben ausgefüllt. Dieser Wert kann jeder unterstützte Farbwert sein.

Jeder Markierung kann optional ein Prozentwert oder ein unterstützter Längenwert zugeordnet werden, der angibt, wo die Farbmarkierung an der Farbverlaufslinie platziert werden soll. "0 %" (oder "0px", "0em"usw.) gibt die Startmarkierung (oder die Seite) an, und "100 %" die Endmarkierung (oder die Seite).

 

Die Syntax der repeating-linear-gradient-Funktion ist mit der der linear-gradient-Funktion identisch.

Nach Erreichen der letzten Farbmarkierung wird der Farbverlauf wieder ab der ersten Farbe wiederholt. Es ist vorteilhaft, als erste und letzte Farbe dieselbe Farbe zu verwenden, damit zwischen den Wiederholungen keine abrupten Farbwechsel auftreten.

Im Folgenden sehen Sie ein Beispiel für einen sich wiederholenden linearen Farbverlauf. Der Übergang findet zwischen zwei Farben statt — Blau und Gelb.

Darstellung eines zweifarbigen, sich wiederholenden linearen Farbverlaufs

background-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);

Die grundlegende Syntax für einen sich wiederholenden radialen Farbverlauf sieht wie folgt aus:

repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FunktionBeschreibung

repeating-radial-gradient()

Gibt einen sich wiederholenden radialen Farbverlauf an, wobei zunächst ein Mittelpunkt, dann die Größe und Form (bei einer Ellipse) des fertigen Kreises bzw. der fertigen Ellipse – oder 100 % – und anschließend die dazwischen liegenden Farbmarkierungen, durch Kommas voneinander getrennt, angegeben werden.

Die möglichen Werte für die Eigenschaft sind:

<shape>

Optionaler Wert, der den Rand des Farbverlaufs angibt. Wenn dieser Wert nicht angegeben wird, ist dies ein Kreis, sofern der size-Parameter ein einzelner Längenwert ist, andernfalls eine Ellipse.

  • ellipse  Gibt einen Farbverlauf in Form einer Ellipse an.
  • circle  Gibt einen Farbverlauf in Form eines Kreises an.
<size>

Optionaler Wert, der die Größe der finalen Form für den Farbverlauf angibt. Mögliche Werte sind entweder zwei durch Leerzeichen voneinander getrennte Längenwerte (oder Prozentsätze) oder eines der folgenden Schlüsselwörter. Wenn dieser Wert nicht angegeben wird, lautet der Standardwert farthest-corner.

  • <length(s)>  

    Ein oder zwei durch Leerzeichen voneinander getrennte Längenwerte oder zwei Prozentwerte.

    Wenn nur ein Längenwert angegeben wird, kennzeichnet dieser den Radius des Kreises.

    Werden zwei Werte (Länge oder Prozentsatz) angegeben, stellt der erste Wert den horizontalen Radius und der zweite den vertikalen Radius dar.

    Prozentwerte gelten relativ zur jeweiligen Größe des Farbverlaufsfelds. Mit Prozentwerten kann nur die Größe elliptischer Farbverläufe, aber nicht die Größe kreisförmiger Farbverläufe angegeben werden.

    Negative Werte sind ungültig.

  • closest-side  Bei kreisförmigen Farbverläufen gibt dieser Wert an, dass die Form am Ende ein Kreis ist, der so groß ist, dass er nahe dem Mittelpunkt auf die Seite des Felds trifft. Bei elliptischen Farbverläufen ist die Form eine Ellipse, die so groß ist, dass sie nahe dem Mittelpunkt genau auf die vertikale und horizontale Seite des Felds trifft.
  • closest-corner  Passt die Form des Farbverlaufs in der Größe so an, dass sie mit dem Mittelpunkt genau auf die nächstgelegene Ecke des Felds trifft. Bei elliptischen Farbverläufen weist die Form des Farbverlaufs dasselbe Verhältnis von Breite zu Höhe auf, das sie auch hätte, wenn closest-side angegeben wäre.
  • farthest-side  Vergleichbar mit closest-side, allerdings wird die Form des Farbverlaufs in ihrer Größe so angepasst, dass sie am vom Mittelpunkt am weitesten entfernten Punkt auf die Seite des Felds (bei kreisförmigen Farbverläufen) oder auf die am weitesten entfernte vertikale und horizontale Seite trifft (bei elliptischen Farbverläufen).
  • farthest-corner  Passt die Form des Farbverlaufs in der Größe so an, dass sie mit dem Mittelpunkt genau auf die am weitesten entfernte Ecke des Felds trifft. Bei elliptischen Farbverläufen weist die Form des Farbverlaufs dasselbe Verhältnis von Breite zu Höhe auf, das sie auch hätte, wenn farthest-side angegeben wäre.
<position>

Optionaler Wert, der die Mitte des Farbverlaufs angibt. Dieser Wert kann dieselben Werte wie die background-position-Eigenschaft annehmen. Wenn dieser Wert nicht angegeben wird, lautet der Standardwert center.

<color-stop>

Es sind mindestens zwei Farbmarkierungen erforderlich. Jede Farbmarkierung besitzt eine oder zwei Komponenten – eine Farbkomponente und eine optionale Positionskomponente.

Die erste Komponente definiert die Farbkomponente einer Markierung für den Farbverlauf. Jeder Markierung ist eine eigene Farbe zugeordnet, und der Bereich zwischen den einzelnen Markierungen wird mit einem fortlaufenden Übergang zwischen diesen beiden Farben ausgefüllt. Dieser Wert kann jeder unterstützte Farbwert sein.

Die zweite Komponente ist ein optionaler Prozent- oder Dezimalwert, der angibt, wo die Farbmarkierung am Farbverlaufsstrahl (ähnlich der Farbverlaufslinie bei linear-gradient, aber vom Mittelpunkt nach außen) platziert werden soll. "0 %" gibt den Anfang des Farbverlaufsstrahls an, und "100 %" gibt den Punkt an, an dem der Farbverlaufsstrahl den Rand schneidet. Der Wert "20 %" gibt z. B. an, dass die Farbmarkierung bei 20 % ab dem Anfang des Farbverlaufsstrahls platziert werden soll. Negative Werte sind möglich und geben an, dass sich die angegebene Farbe für diesen Wert an der Mitte des Übergangs zur nächsten Farbe in der Mitte des Farbverlaufs befindet, sodass die sichtbare Farbe in der Mitte zwischen der angegebenen Farbe und der nächsten Farbe liegt. Auch Werte größer als 100 % sind möglich. Diese geben eine Position mit entsprechend größerem Abstand von der Mitte des Farbverlaufs an.

 

Die Syntax der repeating-radial-gradient-Funktion ist mit der der radial-gradient-Funktion identisch.

Nach Erreichen der letzten Farbmarkierung wird der Farbverlauf wieder ab der ersten Farbe wiederholt. Es ist vorteilhaft, als erste und letzte Farbe dieselbe Farbe zu verwenden, damit zwischen den Wiederholungen keine abrupten Farbwechsel auftreten.

Mit der folgenden Deklaration erstellen Sie einen sich wiederholenden kreisförmigen Farbverlauf.


background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Darstellung eines dreifarbigen, sich wiederholenden kreisförmigen Farbverlaufs

Mit der folgenden Deklaration erstellen Sie einen sich wiederholenden elliptischen Farbverlauf.


background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);


Darstellung eines dreifarbigen, sich wiederholenden elliptischen Farbverlaufs

API-Referenz

Gradients

Beispiele und Lernprogramme

Beispiel für CSS-Farbverlauf

Demos für die Internet Explorer-Testversion

Erstellen von CSS-Farbverläufen im Hintergrund
Irischer Frühling

IEBlog-Beiträge

CSS3-Farbverläufe ohne Präfix in IE10
Ausbau der Netzstabilität in IE10 Release Preview
CSS3-Farbverläufe in IE10 Platform Preview 1

Spezifikation

CSS-Modul für Bildwerte und ersetzten Inhalt, Level 3: Abschnitt 4

 

 

Anzeigen:
© 2015 Microsoft