mozilla

Version 270290 von Farbverläufe_in_CSS

  • Adressname der Version: Farbverläufe_in_CSS
  • Titel der Version: Farbverläufe in CSS
  • ID der Version: 270290
  • Erstellt:
  • Autor: elektronikLexikon
  • Aktuelle Version? Nein
  • Kommentar 85 words added, 1 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);

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