From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:15 -0500
Subject: initial commit

---
 files/de/web/css/gradient/index.html | 91 ++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 files/de/web/css/gradient/index.html

(limited to 'files/de/web/css/gradient')

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>&lt;gradient&gt;</code> <a href="/de/docs/CSS">CSS</a> Datentyp beschreibt ein {{cssxref("&lt;image&gt;")}}, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein {{cssxref("&lt;color&gt;")}} 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', '&lt;gradient&gt;')}}</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>
-- 
cgit v1.2.3-54-g00ecf