Farbverläufe_in_CSS

  • Adressname der Version: Farbverläufe_in_CSS
  • Titel der Version: Farbverläufe in CSS
  • ID der Version: 270291
  • Erstellt:
  • Autor: elektronikLexikon
  • Aktuelle Version? Nein
  • Kommentar 145 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);

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