Farbverläufe_in_CSS

  • Adressname der Version: Farbverläufe_in_CSS
  • Titel der Version: Farbverläufe in CSS
  • ID der Version: 270292
  • Erstellt:
  • Autor: elektronikLexikon
  • Aktuelle Version? Nein
  • Kommentar 229 words added

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.

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>
Zu dieser Version zurücksetzen