Farbverläufe_in_CSS

  • Adressname der Version: Farbverläufe_in_CSS
  • Titel der Version: Farbverläufe in CSS
  • ID der Version: 270296
  • Erstellt:
  • Autor: elektronikLexikon
  • Aktuelle Version? Nein
  • Kommentar 22 words added, 6 words removed

Inhalt der Version

{{ gecko_minversion_header("1.9.2") }}

Gecko 1.9.2 (erstmals benutzt in Firefox 3.6) bringt den Support von Farbverläufen in der CSS-Eigenschaft {{ cssxref("background") }} mit sich. Das hat den großen Vorteil, dass für den fließenden Übergang zweier oder mehrerer  Farben übereinander keine Bilder mehr benötigt werden. Dadurch wird die Downloadzeit verkürzt und die Benutzung der Bandbreite herabgesetzt. Außerdem kann die Zoom-Funktion der Browser individuell auf den Farbverlauf eingehen, wodurch unschöne, verpixelte Bilder bei starkem Hineinzoomen verhindert werden und das Layout um einiges flexibler wird.

Gecko unterstützt zwei Arten von Farbverläufen: linear ({{ cssxref("-moz-linear-gradient") }}) und radial ({{ cssxref("-moz-radial-gradient") }}).

Lineare Farbverläufe

Um einen linearen Farbverlauf zu erstellen, müssen ein Startpunkt und eine Richtung (als Winkel) angegeben werden, anhand welcher der Farbverlauf-Effekt angewandt wird. Sie können außerdem Farbstopps definieren. Farbstopps sind die Farben, zwischen denen Gecko fließende Übergänge herstellen soll. Es werden mindestens zwei Farbstopps benötigt, Sie können jedoch auch mehr angeben, um komplexere Farbverläufe zu erstellen.

Einfache lineare Farbverläufe

Hier als Beispiel einen linearen Farbverlauf, der oben in der Mitte mit blau anfängt und sich nach unten hin weiß färbt:

Screenshot Demo
 
background: -moz-linear-gradient(top, blue, white);

Sie können den gleichen Farbverlauf von links nach rechts laufen lassen:

Screenshot Demo
basic_linear_blueleft.png
 
background: -moz-linear-gradient(left, blue, white);

Sie können den Farbverlauf diagonal laufen lassen, indem Sie sowohl die vertikale als auch die horizontale Startposition angeben:

Screenshot Demo
basic_linear_bluetopleft.png
 
background: -moz-linear-gradient(left top, blue, white);

Winkel

Wenn Sie keinen Winkel angeben, wird er automatisch aufgrund der Startposition festgestellt. Wenn Sie mehr Kontrolle über die Richtung des Farbverlaufs haben möchten, können Sie den Winkel explizit angeben.

Zum Beispiel sehen Sie hier zwei Farbverläufe mit dem Startpunkt links in der Mitte ("left center"), allerdings hat der zweite zusätzlich einen Winkel von 20 Grad.

linear_gradient_angle.png

Für den rechten Farbverlauf wird CSS wie dieses benötigt:

background: -moz-linear-gradient(left 20deg, black, white);

Der Winkel wird zwischen einer horizontalen Linie und der Farbverlauflinie entgegen dem Uhrzeigersinn angegeben. Also erzeugt ein 0°-Winkel einen Farbverlauf von links nach rechts, während ein 90°-Winkel einen Farbverlauf von unten nach oben bedeutet:

linear_redangles.png

background: -moz-linear-gradient(<angle>, red, white);

Farbstopps

Farbstopps sind Punkte entlang der Farbverlauflinie, die eine bestimmte Farbe an ihrem Platz haben. Die Platzierung kann entweder als Prozentangabe der Länge der Linie oder als absolute Längenangabe erfolgen. Sie können so viele Farbstopps definieren, wie Sie wollen, um den erwünschten Effekt zu erzielen.

Wenn Sie die Platzierung als Prozentzahl angeben, bedeutet 0% den Startpunkt, 100% den Endpunkt; wenn nötig können Sie aber auch Werte außerhalb dieses Bereichs angeben, um einen speziellen Effekt zu erzielen.

Beispiel: Drei Farbstopps

Dieses Beispiel definiert 3 Farbstopps

Screenshot Demo
linear_colorstops1.png
 
background: -moz-linear-gradient(top, blue, white 80%, orange);

Bitte beachten Sie, dass Sie für den ersten und den letzten Farbstopp keine Platzierung angeben brauchen, weil die Werte 0% und 100% automatisch bestimmt werden. Der mittlere Farbstopp bekommt eine Platzierung von 80% zugewiesen, wird also weit nach unten verschoben.

Beispiel: Farbstopps mit gleichen Abständen

Ein weiteres Beispiel zeigt eine ganze Palette von Farben, die alle gleich verteilt sind:

Screen Shot Live Demonstration
linear_rainbow.png
 
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Beachten Sie, dass die Farbstopps automatisch verteilt werden, wenn keine Platzierungen angegeben werden.

Transparenz und Farbverläufe

Farbverläufe unterstützen Transparenz. Sie können das zum Beispiel nutzen, wenn Sie mehrere Hintergründe ineinander überfließen lassen wollen.

linear_multibg_transparent.png

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

Die Hintergründe sind "übereinander gestapelt", mit dem angegebenen Hintergrund ganz oben und jedem weiteren Hintergrund weiter weg. Indem Sie Hintergründe so "stapeln", können Sie sehr kreative Effekte wie diese erstellen.

Radiale Farbverläufe

Radiale Farbverläufe werden mit Hilfe der CSS-Eigenschaft {{ cssxref("-moz-radial-gradient") }} erzeugt. Die Syntax ist ähnlich wie die für lineare Farbverläufe, außer dass Sie neben der Form des Farbverlaufs (ob er ein Kreis oder eine Ellipse sein soll) auch die Größe angeben können.

Farbstopps

Sie können Farbstopps genauso angeben, wie bei den linearen Farbverläufen. Der Farbverlauf erweitert sich von der Startposition in alle Richtungen.

Beispiel: Farbstopps mit gleichen Abständen

Als Standardeinstellung sind die Farbstopps wie bei linearen Farbverläufen gleichmäßig verteilt:

Screenshot Demo
radial_gradient_even.png
 
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));

Beispiel: Manuell verteilte Farbstopps

Jetzt platzieren wir die Farbstopps manuell:

Screenshot Demo
radial_gradient_varied.png
 
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Größe

Das ist einer der Punkte, in denen sich radiale von linearen Farbverläufen unterscheiden. Sie können eine Größenangabe bestimmen, die den Punkt angibt, der die Größe des Kreises bzw. der Ellipse definiert. Für Details, siehe diese Beschreibung von Größenwerten.

Beispiel: closest-side für Ellipsen

Diese Ellipse benutzt den closest-side Größenwert, welcher bedeutet, dass die Ellipse vom Startpunkt (also der Mitte) bis zur nächstgelegenen Seite der umschließenden Box aufgefüllt wird.

Screenshot Demonstration
radial_ellipse_size1.png
 
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

Beispiel: farthest-corner für Ellipsen

Dieses Beispiel ist ähnlich wie das Vorherige, außer dass seine Größe als farthest-corner angegeben ist.

This example is similar to the previous one, except that its size is specified as , which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

Screen Shot Live Demonstration
radial_ellipse_size2.png
 
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Example: closest-side for circles

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

Screen Shot Live Demonstration
radial_circle_size1.png
 
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

Repeating gradients

The {{ cssxref("-moz-linear-gradient") }} and {{ cssxref("-moz-radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("-moz-repeating-linear-gradient") }} and {{ cssxref("-moz-repeating-radial-gradient") }} properties are available to offer this functionality.

Example: Repeating linear gradient

This example uses {{ cssxref("-moz-repeating-linear-gradient") }} to create a gradient:

Screen Shot Live Demonstration
repeating_linear_gradient.png
 
background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);

Example: Repeating radial gradient

This example uses {{ cssxref("-moz-repeating-radial-gradient") }} to create a gradient:

Screen Shot Live Demonstration
repeating_radial_gradient.png
 
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

See also

  • {{ cssxref("-moz-linear-gradient") }}
  • {{ cssxref("-moz-radial-gradient") }}
  • {{ cssxref("-moz-repeating-linear-gradient") }}
  • {{ cssxref("-moz-repeating-radial-gradient") }}

{{ HTML5ArticleTOC() }}

 

{{ languages( { "en": "en/Using_gradients", "fr": "fr/Utilisation_de_dégradés", "ja": "ja/Using_gradients", "de": "de/Farbverläufe_in_CSS" } ) }}

Quelltext der Version

<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>Gecko 1.9.2 (erstmals benutzt in Firefox 3.6) bringt den Support von Farbverläufen in der CSS-Eigenschaft {{ cssxref("background") }} mit sich. Das hat den großen Vorteil, dass für den fließenden Übergang zweier oder mehrerer  Farben übereinander keine Bilder mehr benötigt werden. Dadurch wird die Downloadzeit verkürzt und die Benutzung der Bandbreite herabgesetzt. Außerdem kann die Zoom-Funktion der Browser individuell auf den Farbverlauf eingehen, wodurch unschöne, verpixelte Bilder bei starkem Hineinzoomen verhindert werden und das Layout um einiges flexibler wird.</p>
<p>Gecko unterstützt zwei Arten von Farbverläufen: linear ({{ cssxref("-moz-linear-gradient") }}) und radial ({{ cssxref("-moz-radial-gradient") }}).</p>
<h2>Lineare Farbverläufe</h2>
<p>Um einen linearen Farbverlauf zu erstellen, müssen ein Startpunkt und eine Richtung (als Winkel) angegeben werden, anhand welcher der Farbverlauf-Effekt angewandt wird. Sie können außerdem <strong>Farbstopps </strong>definieren. Farbstopps sind die Farben, zwischen denen Gecko fließende Übergänge herstellen soll. Es werden mindestens zwei Farbstopps benötigt, Sie können jedoch auch mehr angeben, um komplexere Farbverläufe zu erstellen.</p>
<h3>Einfache lineare Farbverläufe</h3>
<p>Hier als Beispiel einen linearen Farbverlauf, der oben in der Mitte mit blau anfängt und sich nach unten hin weiß färbt:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demo</td> </tr> <tr> <td><img alt="" border="0" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid #333; background: -moz-linear-gradient(top, blue,white); style="> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-linear-gradient(top, blue, white);
</pre>
<p>Sie können den gleichen Farbverlauf von links nach rechts laufen lassen:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demo</td> </tr> <tr> <td><img alt="basic_linear_blueleft.png" class="internal default" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(left, blue, white);"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-linear-gradient(left, blue, white);
</pre>
<p>Sie können den Farbverlauf diagonal laufen lassen, indem Sie sowohl die vertikale als auch die horizontale Startposition angeben:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demo</td> </tr> <tr> <td><img alt="basic_linear_bluetopleft.png" class="internal default" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(left top, blue, white);"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-linear-gradient(left top, blue, white);</pre>
<h3>Winkel</h3>
<p>Wenn Sie keinen Winkel angeben, wird er automatisch aufgrund der Startposition festgestellt. Wenn Sie mehr Kontrolle über die Richtung des Farbverlaufs haben möchten, können Sie den Winkel explizit angeben.</p>
<p>Zum Beispiel sehen Sie hier zwei Farbverläufe mit dem Startpunkt links in der Mitte ("left center"), allerdings hat der zweite zusätzlich einen Winkel von 20 Grad.</p>
<p><img alt="linear_gradient_angle.png" class="internal default" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>
<p>Für den rechten Farbverlauf wird CSS wie dieses benötigt:</p>
<pre class="deki-transform">background: -moz-linear-gradient(left 20deg, black, white);
</pre>
<p>Der Winkel wird zwischen einer horizontalen Linie und der Farbverlauflinie entgegen dem Uhrzeigersinn angegeben. Also erzeugt ein 0°-Winkel einen Farbverlauf von links nach rechts, während ein 90°-Winkel einen Farbverlauf von unten nach oben bedeutet:</p>
<p><img alt="linear_redangles.png" class="internal default" src="/@api/deki/files/3954/=linear_redangles.png"></p>
<pre>background: -moz-linear-gradient(&lt;angle&gt;, red, white);</pre>
<h3>Farbstopps</h3>
<p>Farbstopps sind Punkte entlang der Farbverlauflinie, die eine bestimmte Farbe an ihrem Platz haben. Die Platzierung kann entweder als Prozentangabe der Länge der Linie oder als absolute Längenangabe erfolgen. Sie können so viele Farbstopps definieren, wie Sie wollen, um den erwünschten Effekt zu erzielen.</p>
<p>Wenn Sie die Platzierung als Prozentzahl angeben, bedeutet 0% den Startpunkt, 100% den Endpunkt; wenn nötig können Sie aber auch Werte außerhalb dieses Bereichs angeben, um einen speziellen Effekt zu erzielen.</p>
<h4>Beispiel: Drei Farbstopps</h4>
<p>Dieses Beispiel definiert 3 Farbstopps</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demo</td> </tr> <tr> <td><img alt="linear_colorstops1.png" class="internal default" src="/@api/deki/files/3955/=linear_colorstops1.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(center top , blue, white 80%, orange) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre>background: -moz-linear-gradient(top, blue, white 80%, orange);
</pre>
<p>Bitte beachten Sie, dass Sie für den ersten und den letzten Farbstopp keine Platzierung angeben brauchen, weil die Werte 0% und 100% automatisch bestimmt werden. Der mittlere Farbstopp bekommt eine Platzierung von 80% zugewiesen, wird also weit nach unten verschoben.</p>
<h4>Beispiel: Farbstopps mit gleichen Abständen</h4>
<p>Ein weiteres Beispiel zeigt eine ganze Palette von Farben, die alle gleich verteilt sind:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="linear_rainbow.png" class="internal default" src="/@api/deki/files/3956/=linear_rainbow.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
</pre>
<p>Beachten Sie, dass die Farbstopps automatisch verteilt werden, wenn keine Platzierungen angegeben werden.</p>
<h3>Transparenz und Farbverläufe</h3>
<p>Farbverläufe unterstützen Transparenz. Sie können das zum Beispiel nutzen, wenn Sie mehrere Hintergründe ineinander überfließen lassen wollen.</p>
<p><img alt="linear_multibg_transparent.png" class="internal default" src="/@api/deki/files/3957/=linear_multibg_transparent.png"></p>
<pre>background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
</pre>
<p>Die Hintergründe sind "übereinander gestapelt", mit dem angegebenen Hintergrund ganz oben und jedem weiteren Hintergrund weiter weg. Indem Sie Hintergründe so "stapeln", können Sie sehr kreative Effekte wie diese erstellen.</p>
<h2>Radiale Farbverläufe</h2>
<p>Radiale Farbverläufe werden mit Hilfe der CSS-Eigenschaft {{ cssxref("-moz-radial-gradient") }} erzeugt. Die Syntax ist ähnlich wie die für lineare Farbverläufe, außer dass Sie neben der Form des Farbverlaufs (ob er ein Kreis oder eine Ellipse sein soll) auch die Größe angeben können.</p>
<h3>Farbstopps</h3>
<p>Sie können Farbstopps genauso angeben, wie bei den linearen Farbverläufen. Der Farbverlauf erweitert sich von der Startposition in alle Richtungen.</p>
<h4>Beispiel: <span>Farbstopps mit gleichen Abständen</span></h4>
<p>Als Standardeinstellung sind die Farbstopps wie bei linearen Farbverläufen gleichmäßig verteilt:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demo</td> </tr> <tr> <td><img alt="radial_gradient_even.png" class="internal default" src="/@api/deki/files/3958/=radial_gradient_even.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));
</pre>
<h4>Beispiel: Manuell verteilte Farbstopps</h4>
<p>Jetzt platzieren wir die Farbstopps manuell:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demo</td> </tr> <tr> <td><img alt="radial_gradient_varied.png" class="internal default" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform"><span style="color: rgb(0, 0, 0); font-weight: bold;">background</span><span style="color: rgb(0, 170, 0);">:</span> -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span><span style="color: rgb(153, 51, 51);">red</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">5</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">25</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h3>Größe</h3>
<p>Das ist einer der Punkte, in denen sich radiale von linearen Farbverläufen unterscheiden. Sie können eine Größenangabe bestimmen, die den Punkt angibt, der die Größe des Kreises bzw. der Ellipse definiert. Für Details, siehe <a href="/en/CSS/-moz-radial-gradient#Size_constants" title="en/CSS/-moz-radial-gradient#Size constants">diese Beschreibung von Größenwerten</a>.</p>
<h4>Beispiel: closest-side für Ellipsen</h4>
<p>Diese Ellipse benutzt den <code>closest-side</code> Größenwert, welcher bedeutet, dass die Ellipse vom Startpunkt (also der Mitte) bis zur nächstgelegenen Seite der umschließenden Box aufgefüllt wird.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;"> <tbody> <tr> <td class="header">Screenshot</td> <td class="header">Demonstration</td> </tr> <tr> <td><img alt="radial_ellipse_size1.png" class="internal default" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td> <td> <div style="width: 250px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, rgb(30, 144, 255) 50%, white) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span>ellipse closest-side<span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">red</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">10</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">white</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h4>Beispiel: farthest-corner für Ellipsen</h4>
<p>Dieses Beispiel ist ähnlich wie das Vorherige, außer dass seine Größe als <code>farthest-corner</code> angegeben ist.</p>
<p>This example is similar to the previous one, except that its size is specified as , which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_ellipse_size2.png" class="internal default" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td> <td> <div style="width: 250px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, rgb(30, 144, 255) 50%, white) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span>ellipse farthest-corner<span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">red</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">10</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">white</span><span style="color: rgb(0, 170, 0);">);</span>
</pre><h4>Example: closest-side for circles</h4>
<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_circle_size1.png" class="internal default" src="/@api/deki/files/3962/=radial_circle_size1.png"></td> <td> <div style="width: 250px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-radial-gradient(circle closest-side, red, yellow 10%, rgb(30, 144, 255) 50%, white) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
</pre>
<p>Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.</p>
<h2>Repeating gradients</h2>
<p>The {{ cssxref("-moz-linear-gradient") }} and {{ cssxref("-moz-radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("-moz-repeating-linear-gradient") }} and {{ cssxref("-moz-repeating-radial-gradient") }} properties are available to offer this functionality.</p>
<h3>Example: Repeating linear gradient</h3>
<p>This example uses {{ cssxref("-moz-repeating-linear-gradient") }} to create a gradient:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="repeating_linear_gradient.png" class="internal default" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-repeating-linear-gradient(left top -45deg, red, red 5px, white 5px, white 10px) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
</pre>
<h3>Example: Repeating radial gradient</h3>
<p>This example uses {{ cssxref("-moz-repeating-radial-gradient") }} to create a gradient:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="repeating_radial_gradient.png" class="internal default" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px) repeat scroll 0% 0% transparent;"> </div> </td> </tr> </tbody>
</table>
<pre class="deki-transform">background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
</pre>
<h2>See also</h2>
<ul> <li>{{ cssxref("-moz-linear-gradient") }}</li> <li>{{ cssxref("-moz-radial-gradient") }}</li> <li>{{ cssxref("-moz-repeating-linear-gradient") }}</li> <li>{{ cssxref("-moz-repeating-radial-gradient") }}</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p> </p>
<p>{{ languages( { "en": "en/Using_gradients", "fr": "fr/Utilisation_de_dégradés", "ja": "ja/Using_gradients", "de": "de/Farbverläufe_in_CSS" } ) }}</p>
Zu dieser Version zurücksetzen