diff options
Diffstat (limited to 'files/de/web/css/gradient/index.html')
| -rw-r--r-- | files/de/web/css/gradient/index.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/files/de/web/css/gradient/index.html b/files/de/web/css/gradient/index.html new file mode 100644 index 0000000000..dcec7d40b2 --- /dev/null +++ b/files/de/web/css/gradient/index.html @@ -0,0 +1,91 @@ +--- +title: <gradient> +slug: Web/CSS/gradient +tags: + - CSS + - CSS Datentyp + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/gradient +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><gradient></code> <a href="/de/docs/CSS">CSS</a> Datentyp beschreibt ein {{cssxref("<image>")}}, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein {{cssxref("<color>")}} Wert, aber ein Bild <a href="/de/docs/Web/CSS/image#keine_inneren_Maße">ohne innere Maße</a>; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.</p> + +<p>Es gibt drei Arten von Farbverläufen:</p> + +<ul> + <li id="linear-gradient"><em>Lineare Farbverläufe</em>, erzeugt durch die {{cssxref("linear-gradient()")}} Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft. + + <pre class="brush: html" style="display: none;">Ein durch einen Farbverlauf erzeugter Regenbogen +</pre> + + <pre class="brush: css">body { +background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); +}</pre> + + <p>{{EmbedLiveSample('linear-gradient', 600, 20)}}</p> + </li> + <li id="radial-gradient"><em>Radiale Farbverläufe</em>, erzeugt durch die {{cssxref("radial-gradient()")}} Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe. + <pre class="brush: html" style="display: none;">Radialer Farbverlauf + </pre> + + <pre class="brush: css">body { +background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; +background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +</pre> + + <p>{{EmbedLiveSample('radial-gradient', 600, 20)}}</p> + </li> + <li id="repeating-gradient"><em>Wiederholende Farbverläufe</em>, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist. + <pre class="brush: html" style="display: none;">Wiederholender Farbverlauf +</pre> + + <pre class="brush: css">body { +background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); +background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); +} </pre> + + <p>{{EmbedLiveSample('repeating-gradient', 600, 20)}}</p> + </li> +</ul> + +<p>Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Farbverläufe_in_CSS">Farbverläufe in CSS</a>, {{cssxref("linear-gradient()")}}, {{cssxref("radial-gradient()")}}, {{cssxref("repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient()")}}</li> +</ul> |