aboutsummaryrefslogtreecommitdiff
path: root/files/de/orphaned/web/css
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-13 05:04:02 -0400
committerGitHub <noreply@github.com>2021-07-13 11:04:02 +0200
commita4e6bb268d21f056709beb6672e36390325e3c7d (patch)
tree3413df9a66a45561d8df22c93cbd8bd1598d48da /files/de/orphaned/web/css
parent394f267824127692f472fc71a94f2d78ee9db819 (diff)
downloadtranslated-content-a4e6bb268d21f056709beb6672e36390325e3c7d.tar.gz
translated-content-a4e6bb268d21f056709beb6672e36390325e3c7d.tar.bz2
translated-content-a4e6bb268d21f056709beb6672e36390325e3c7d.zip
delete conflicting/orphaned docs in de (#1422)
Diffstat (limited to 'files/de/orphaned/web/css')
-rw-r--r--files/de/orphaned/web/css/@page/bleed/index.html78
-rw-r--r--files/de/orphaned/web/css/@page/marks/index.html85
-rw-r--r--files/de/orphaned/web/css/_colon_-moz-ui-valid/index.html95
-rw-r--r--files/de/orphaned/web/css/index/index.html9
-rw-r--r--files/de/orphaned/web/css/linear-gradient()/index.html333
-rw-r--r--files/de/orphaned/web/css/tools/cubic_bezier_generator/index.html322
-rw-r--r--files/de/orphaned/web/css/transform-function/translatex/index.html124
7 files changed, 0 insertions, 1046 deletions
diff --git a/files/de/orphaned/web/css/@page/bleed/index.html b/files/de/orphaned/web/css/@page/bleed/index.html
deleted file mode 100644
index 7ebf9b550a..0000000000
--- a/files/de/orphaned/web/css/@page/bleed/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: bleed
-slug: orphaned/Web/CSS/@page/bleed
-tags:
- - CSS
- - CSS Referenz
- - NeedsBrowserCompatibility
- - NeedsLiveSample
- - NeedsMobileBrowserCompatibility
-translation_of: Web/CSS/@page/bleed
-original_slug: Web/CSS/@page/bleed
----
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
-
-<h2 id="Übersicht">Übersicht</h2>
-
-<p>Der <code>bleed</code> <a href="/de/docs/Web/CSS/At-Regel">At-Regel</a> Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush:css">/* Schlüsselwortwerte */
-bleed: auto;
-
-/* &lt;length&gt; Werte */
-bleed: 8pt;
-bleed: 1cm;
-</pre>
-
-<h3 id="Werte">Werte</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Erhält den Wert <code>6pt</code>, falls der Wert von {{cssxref("marks")}} <code>crop</code> ist. Ansonsten ist der Wert <code>0</code>.</dd>
- <dt><code>{{cssxref("&lt;length&gt;")}}</code></dt>
- <dd>Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.</dd>
-</dl>
-
-<h3 id="Formale_Syntax">Formale Syntax</h3>
-
-{{csssyntax}}
-
-<h2 id="Beispiel">Beispiel</h2>
-
-<pre class="brush: css">@page {
- bleed: 1cm;
-}
-</pre>
-
-<h2 id="Spezifikationen">Spezifikationen</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spezifikation</th>
- <th scope="col">Status</th>
- <th scope="col">Kommentar</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td>
- <td>{{Spec2("CSS3 Paged Media")}}</td>
- <td>Ursprüngliche Definition</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
-
-<p>{{Compat("css.at-rules.page.bleed")}}</p>
-
-<h2 id="Siehe_auch">Siehe auch</h2>
-
-<ul>
- <li>{{Cssxref("marks")}}</li>
-</ul>
diff --git a/files/de/orphaned/web/css/@page/marks/index.html b/files/de/orphaned/web/css/@page/marks/index.html
deleted file mode 100644
index f867360fc4..0000000000
--- a/files/de/orphaned/web/css/@page/marks/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: marks
-slug: orphaned/Web/CSS/@page/marks
-tags:
- - CSS
- - CSS Eigenschaft
- - Layout
- - NeedsBrowserCompatibility
- - NeedsExample
- - NeedsMobileBrowserCompatibility
- - Referenz
- - Web
-translation_of: Web/CSS/@page/marks
-original_slug: Web/CSS/@page/marks
----
-<p>{{CSSRef}}</p>
-
-<h2 id="Übersicht">Übersicht</h2>
-
-<p>Die <code>marks</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. <em>Schneidemarken</em> zeigen an, wo die Seite abgeschnitten werden soll. <em>Registermarken</em> verden zur Ausrichtung von Blättern benutzt.</p>
-
-<p>Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush:css language-css"><code class="language-css"><span class="comment token">/* Schlüsselwortwerte */</span>
-<span class="property token">marks</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
-<span class="property token">marks</span><span class="punctuation token">:</span> crop<span class="punctuation token">;</span>
-<span class="property token">marks</span><span class="punctuation token">:</span> cross<span class="punctuation token">;</span>
-<span class="property token">marks</span><span class="punctuation token">:</span> crop cross<span class="punctuation token">;</span></code></pre>
-
-<h3 id="Werte">Werte</h3>
-
-<dl>
- <dt><code>crop</code></dt>
- <dd>Es werden Schneidemarken angezeigt.</dd>
- <dt><code>cross</code></dt>
- <dd>Es werden Registermarken angezeigt.</dd>
- <dt><code>none</code></dt>
- <dd>Es werden keine Marken angezeigt.</dd>
-</dl>
-
-<h3 id="Formale_Syntax">Formale Syntax</h3>
-
-{{csssyntax}}
-
-<h2 id="Beispiele">Beispiele</h2>
-
-<pre class="brush:css">@page {
- marks: crop cross;
-}
-</pre>
-
-<h2 id="Spezifikationen">Spezifikationen</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spezifikation</th>
- <th scope="col">Status</th>
- <th scope="col">Kommentar</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}</td>
- <td>{{Spec2('CSS3 Paged Media')}}</td>
- <td>Ursprüngliche Definition</td>
- </tr>
- </tbody>
-</table>
-
-<p>Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.</p>
-
-<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
-
-{{Compat("css.at-rules.page.marks")}}
-
-<h2 id="Siehe_auch">Siehe auch</h2>
-
-<ul>
- <li>{{Cssxref("@page/bleed", "bleed")}}</li>
-</ul>
diff --git a/files/de/orphaned/web/css/_colon_-moz-ui-valid/index.html b/files/de/orphaned/web/css/_colon_-moz-ui-valid/index.html
deleted file mode 100644
index d7f6fe38f1..0000000000
--- a/files/de/orphaned/web/css/_colon_-moz-ui-valid/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: ':-moz-ui-valid'
-slug: orphaned/Web/CSS/:-moz-ui-valid
-tags:
- - CSS
- - CSS Pseudoklasse
- - CSS Referenz
- - NeedsExample
- - NeedsMobileBrowserCompatibility
- - Non-standard
-translation_of: Web/CSS/:-moz-ui-valid
-original_slug: Web/CSS/:-moz-ui-valid
----
-<div>{{Non-standard_header}}{{CSSRef}}</div>
-
-<h2 id="Übersicht">Übersicht</h2>
-
-<p>Die <code>:-moz-ui-valid</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes validierte Formularelement, dessen Wert korrekt validiert basierend auf dessen <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Beschränkungsvalidierung">Validierungsbeschränkungen</a>.</p>
-
-<p>Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:</p>
-
-<ul>
- <li>Falls das Steuerungselement nicht den Fokus hat und der Wert gültig ist, wende diese Pseudoklasse an.</li>
- <li>Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse an.</li>
- <li>Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.</li>
- <li>Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.</li>
-</ul>
-
-<p>Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Pflichtfelder werden nur als ungültig markiert, falls der Benutzer diese ändert oder versucht, einen unveränderten ungültigen Wert abzuschicken.</p>
-
-<h2 id="Spezifikationen">Spezifikationen</h2>
-
-<p>Nicht Teil einer Spezifikation.</p>
-
-<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Merkmal</th>
- <th>Chrome</th>
- <th>Firefox (Gecko)</th>
- <th>Internet Explorer</th>
- <th>Opera</th>
- <th>Safari</th>
- </tr>
- <tr>
- <td>Grundlegende Unterstützung</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatGeckoDesktop(2)}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Merkmal</th>
- <th>Android</th>
- <th>Chrome für Android</th>
- <th>Firefox Mobile (Gecko)</th>
- <th>IE Mobile</th>
- <th>Opera Mobile</th>
- <th>Safari Mobile</th>
- </tr>
- <tr>
- <td>Grundlegende Unterstützung</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Siehe_auch">Siehe auch</h2>
-
-<ul>
- <li>{{cssxref(":valid")}}</li>
- <li>{{cssxref(":invalid")}}</li>
- <li>{{cssxref(":required")}}</li>
- <li>{{cssxref(":optional")}}</li>
- <li>{{cssxref(":-moz-ui-valid")}}</li>
-</ul>
diff --git a/files/de/orphaned/web/css/index/index.html b/files/de/orphaned/web/css/index/index.html
deleted file mode 100644
index 9841f31ef8..0000000000
--- a/files/de/orphaned/web/css/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: CSS Dokumentationsverzeichnis
-slug: orphaned/Web/CSS/Index
-tags:
- - CSS
-translation_of: Web/CSS/Index
-original_slug: Web/CSS/Index
----
-<p>{{Index("/de/docs/Web/CSS")}}</p>
diff --git a/files/de/orphaned/web/css/linear-gradient()/index.html b/files/de/orphaned/web/css/linear-gradient()/index.html
deleted file mode 100644
index 31fd00cad7..0000000000
--- a/files/de/orphaned/web/css/linear-gradient()/index.html
+++ /dev/null
@@ -1,333 +0,0 @@
----
-title: linear-gradient()
-slug: orphaned/Web/CSS/linear-gradient()
-translation_of: Web/CSS/linear-gradient()
-original_slug: Web/CSS/linear-gradient()
----
-<p>{{ CSSRef() }}</p>
-
-<p>Die CSS <code>linear-gradient()</code> Funktion erstellt ein {{cssxref("&lt;image&gt;")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("&lt;gradient&gt;")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("&lt;color&gt;")}} sondern ein Bild mit <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">keinen spezifischen Dimensionen</a>; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.</p>
-
-<p>Ein konstanter Farbverlauf wird durch eine Achse, die <em>gradient line</em>, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur <em>gradient line</em> stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der <em>gradient line</em>.</p>
-
-<p> </p>
-
-<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;">Die <em>gradient line</em> wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.</p>
-
-<p>Der Startpunkt ist der Punkt auf der <em>gradient line</em>, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der <em>gradient line</em> und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt.  </p>
-
-<p>So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der <em>gradient line </em>und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt.  </p>
-
-<p>Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal <em>magic corners</em> genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.</p>
-
-<p>Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden.  Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.</p>
-
-<p>Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.</p>
-
-<p>Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt.  Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} CSS Datentyp benutzt wird.</p>
-
-<div class="note">Farbverläufe sind als CSS <code>&lt;image&gt;</code> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <code>&lt;image&gt;</code> Datentyp benötigt ist. Aus diesem Grund,<code> </code>wird ein <code>linear-gradient</code> nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("&lt;color&gt;")}} benötigen,  funktionieren.</div>
-
-<h2 id="Syntax" style="">Syntax</h2>
-
-<pre class="twopartsyntaxbox notranslate">linear-gradient(
-  [ <a href="/en-US/CSS/angle" title="angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop&gt; [, &lt;color-stop&gt;]+ )
- \---------------------------------/ \----------------------------/
- Definition of the gradient line List of color stops
-
-where <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
- and <code>&lt;color-stop&gt; = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
-</pre>
-
-<pre class="notranslate">linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */
-linear-gradient( to left top, blue, red); /* A gradient going from the bottom right to the top left starting blue and
- finishing red */
-
-linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
- and finishing red */
-</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><code>&lt;side-or-corner&gt;</code></dt>
- <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br>
- The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an <span style="background-color: #000044; color: #ffffff;">angle</span> that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code>&lt;color-stop&gt;</code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd>
- <dt><code>&lt;angle&gt;</code></dt>
- <dd>An angle of direction for the gradient. See {{ cssxref("&lt;angle&gt;") }}.</dd>
- <dt><code>&lt;color-stop&gt;</code></dt>
- <dd>This value is comprised of a {{cssxref("&lt;color&gt;")}} value, followed by an optional stop position (either a percentage or a {{cssxref("&lt;length&gt;")}} along the gradient axis).<br>
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd>
-</dl>
-
-<h3 id="History_of_the_syntax">History of the syntax</h3>
-
-<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p>
-
-<pre class="notranslate"><code>-webkit-gradient(&lt;type&gt;, &lt;point&gt; [, &lt;radius&gt;]?, &lt;point&gt; [, &lt;radius&gt;]? [, &lt;stop&gt;]*)</code>
-</pre>
-
-<p>In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.</p>
-
-<p>An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:</p>
-
-<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
-</pre>
-
-<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p>
-
-<p>But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.</p>
-
-<ul>
- <li>The support of an {{ cssxref("&lt;angle&gt;") }} as an origin, allowing gradients of any direction.</li>
- <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li>
-</ul>
-
-<p>The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):</p>
-
-<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("&lt;angle&gt;")}} | <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
-</pre>
-
-<p>Unfortunately, the addition of the {{ cssxref("&lt;angle&gt;") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p>
-
-<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("&lt;angle&gt;")}} | to <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
-</pre>
-
-<p>This should be the final syntax.</p>
-
-<p>A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("&lt;angle&gt;") }} defined like polar angles, that is with <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (<code>0deg</code> = East<code>)</code>. They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3>
-
-<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p>
-
-<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">div {
- background: linear-gradient(135deg, red, blue);
-}</pre>
-
-<h4 id="Result">Result:</h4>
-
-<p>{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}</p>
-
-<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3>
-
-<p>Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.</p>
-
-<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">div {
- background: linear-gradient(135deg, red, red 60%, blue);
-}</pre>
-
-<h4 id="Result_2">Result:</h4>
-
-<p>{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}</p>
-
-<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3>
-
-<p>If the first color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 0%. If the last color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p>
-
-<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p>
-
-<pre class="brush: html notranslate">&lt;div&gt;A rainbow made from a gradient&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">div {
- background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-}
-</pre>
-
-<h4 id="Result_3">Result:</h4>
-
-<p>{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}</p>
-
-<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3>
-
-<p>The <code>linear-gradient</code> does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.</p>
-
-<h3 id="Using_transparency">Using transparency</h3>
-
-<pre class="brush: html notranslate">&lt;div&gt;Linear with transparency&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">div {
- background: linear-gradient(to bottom right, red, rgba(255,0,0,0));
-}</pre>
-
-<h4 id="Result_4">Result:</h4>
-
-<p>{{ EmbedLiveSample("Using_transparency") }}</p>
-
-<p>Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>background-size</code>).</p>
-
-<h2 id="Notes">Notes</h2>
-
-<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="https://web.archive.org/web/20120829151425/http://richard.milewski.org:80/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p>
-
-<h2 id="Specifications" name="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- <th scope="col">Comment</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}</td>
- <td>{{ Spec2('CSS3 Images') }}</td>
- <td>Initial definition</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Firefox (Gecko)</th>
- <th>Chrome</th>
- <th>Internet Explorer</th>
- <th>Opera (Presto)</th>
- <th>Safari</th>
- </tr>
- <tr>
- <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td>
- <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br>
- {{ CompatGeckoDesktop("16") }}<sup><a href="#bc5">[5]</a></sup></td>
- <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
- <td>10.0 <sup><a href="#bc1">[1]</a></sup></td>
- <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td>
- <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
- </tr>
- <tr>
- <td>On {{cssxref("border-radius")}}</td>
- <td>{{CompatGeckoDesktop("29")}}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- </tr>
- <tr>
- <td>On any other property that accept {{cssxref("&lt;image&gt;")}}</td>
- <td>{{ CompatNo() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- </tr>
- <tr>
- <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td>
- <td>{{ CompatNo() }}</td>
- <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
- <td>{{ CompatNo() }}</td>
- <td>{{ CompatNo() }}</td>
- <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td>
- </tr>
- <tr>
- <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td>
- <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td>
- <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
- <td>10</td>
- <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
- <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td>
- </tr>
- <tr>
- <td>Standard syntax (using the <code>to</code> keyword)</td>
- <td>{{CompatGeckoDesktop("16")}}</td>
- <td>26.0 (537.27)</td>
- <td>10</td>
- <td>12.10</td>
- <td>6.1</td>
- </tr>
- <tr>
- <td>Interpolation hints (a percent without a color)</td>
- <td>{{CompatGeckoDesktop("36")}}</td>
- <td>40</td>
- <td> </td>
- <td>27</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Firefox (Gecko)</th>
- <th>Chrome</th>
- <th>Internet Explorer</th>
- <th>Opera (Presto)</th>
- <th>Safari</th>
- </tr>
- <tr>
- <td>Basic support</td>
- <td>{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br>
- {{ CompatGeckoMobile("16") }}<sup><a href="#bc5">[5]</a></sup></td>
- <td>
- <p>16{{property_prefix("-webkit")}}<br>
- 26</p>
- </td>
- <td>10</td>
- <td>{{CompatVersionUnknown}}</td>
- <td>{{CompatVersionUnknown}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>
-
-<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p>
-
-<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera &amp; Webkit considers {{ cssxref("&lt;angle&gt;") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p>
-
-<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p>
-
-<pre class="notranslate">linear-gradient(to top left, blue, red);</pre>
-
-<p>is almost the same as:</p>
-
-<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre>
-
-<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p>
-
-<p><sup><a name="bc5">[5]</a></sup>Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.</p>
-
-<h3 id="Cross-browser_gradients">Cross-browser gradients</h3>
-
-<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p>
-
-<pre class="brush: css notranslate">.grad {
- background-color: #F07575; /* fallback color if gradients are not supported */
- background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
- background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
- background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
- background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
-}
-</pre>
-
-<p>The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li>
- <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li>
- <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li>
- <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li>
-</ul>
-
-<p> </p>
diff --git a/files/de/orphaned/web/css/tools/cubic_bezier_generator/index.html b/files/de/orphaned/web/css/tools/cubic_bezier_generator/index.html
deleted file mode 100644
index e36d2c78c0..0000000000
--- a/files/de/orphaned/web/css/tools/cubic_bezier_generator/index.html
+++ /dev/null
@@ -1,322 +0,0 @@
----
-title: Cubic Bezier Generator
-slug: orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
-tags:
- - CSS
- - Werkzeuge
-translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
-original_slug: Web/CSS/Tools/Cubic_Bezier_Generator
----
-<div id="Tool">
-<div class="hidden">
-<pre class="brush:html">&lt;html&gt;
- &lt;canvas id="bezier" width="336" height="336"&gt;
- &lt;/canvas&gt;
- &lt;form&gt;
- &lt;label for="x1"&gt;x1 = &lt;/label&gt;&lt;input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'&gt;
- &lt;label for="y1"&gt;y1 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'&gt;
- &lt;label for="x2"&gt;x2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'&gt;
- &lt;label for="y2"&gt;y2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'&gt;
- &lt;br&gt;
- &lt;output id="output"&gt;Log&lt;/output&gt;
- &lt;/form&gt;
-&lt;/html&gt;
- </pre>
-
-<pre class="brush:css">.field {
- width: 40px;
-}
- </pre>
-
-<pre class="brush:js">function updateCanvas() {
-
- var x1 = document.getElementById('x1').value;
- var y1 = document.getElementById('y1').value;
- var x2 = document.getElementById('x2').value;
- var y2 = document.getElementById('y2').value;
-
- drawBezierCurve(x1, y1, x2, y2);
-}
-
-const radius = 4;
-// Place needed to draw the rulers
-const rulers = 30.5;
-const margin = 10.5;
-const basic_scale_size = 5; // Size of 0.1 tick on the rulers
-var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
-var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
-
-function initCanvas() {
- // get the canvas element using the DOM
- var canvas = document.getElementById('bezier');
-
- // Make sure we don't execute when canvas isn't supported
- if (canvas.getContext) {
- // use getContext to use the canvas for drawing
- var ctx = canvas.getContext('2d');
-
- scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
-
- canvas.onmousedown = mouseDown;
- canvas.onmouseup = mouseUp;
- } else {
- alert('You need Safari or Firefox 1.5+ to see this demo.');
- }
-}
-
-function cX(x) {
- return x * scaling + rulers;
-}
-
-function reverseX(x) {
- return (x - rulers) / scaling;
-}
-
-function lX(x) {
- //Used when drawing vertical lines to prevent subpixel blur
- var result = cX(x);
- return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function cY(y) {
-
- return (1 - y) * scaling + margin;
-}
-
-function reverseY(y) {
- return (margin - y) / scaling + 1;
-}
-
-function lY(y) {
- // Used when drawing horizontal lines to prevent subpixel blur
- var result = cY(y);
- return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function drawBezierCurve(x1, y1, x2, y2) {
-
- // get the canvas element using the DOM
- var canvas = document.getElementById('bezier');
-
- // Make sure we don't execute when canvas isn't supported
- if (canvas.getContext) {
-
- // use getContext to use the canvas for drawing
- var ctx = canvas.getContext('2d');
-
-
-
- // Clear canvas
- ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- // Draw the rulers
- ctx.beginPath();
- ctx.strokeStyle = "black";
-
- // Draw the Y axis
- ctx.moveTo(cX(0), cY(0));
- ctx.lineTo(cX(1), cY(0));
- ctx.textAlign = "right";
-
- for (var i = 0.1; i &lt;= 1; i = i + 0.1) {
- ctx.moveTo(-basic_scale_size + cX(0), lY(i));
- if ((i == 0.5) || (i &gt; 0.9)) {
- ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
- ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
- // Limitation the constant 4 should be font size dependant
- }
- ctx.lineTo(cX(0), lY(i));
- }
- ctx.stroke();
- ctx.closePath();
- ctx.beginPath();
-
- // Draw the Y axis label
- ctx.save();
- ctx.rotate(-Math.PI / 2);
- ctx.textAlign = "left";
- ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
- ctx.restore();
-
- // Draw the X axis
- ctx.moveTo(cX(0), cY(0));
- ctx.lineTo(cX(0), cY(1));
- ctx.textAlign = "center";
- for (i = 0.1; i &lt;= 1; i = i + 0.1) {
- ctx.moveTo(lX(i), basic_scale_size + cY(0));
- if ((i == 0.5) || (i &gt; 0.9)) {
- ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
- ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
- // Limitation the constant 4 should be dependant of the font size
- }
- ctx.lineTo(lX(i), cY(0));
- }
-
- // Draw the X axis label
- ctx.textAlign = "left";
- ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
- // Limitation the constant 4 should be dependant of the font size
- ctx.stroke();
- ctx.closePath();
-
- // Draw the Bézier Curve
- ctx.beginPath();
- ctx.moveTo(cX(0), cY(0));
- ctx.strokeStyle = 'blue';
- ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
- ctx.stroke();
- ctx.closePath();
-
-
-
- // Draw the P2 point (with a line to P0)
- ctx.beginPath();
- ctx.strokeStyle = 'red';
- ctx.moveTo(cX(x1), cY(y1));
- ctx.lineTo(cX(0), cY(0));
- ctx.stroke();
- ctx.closePath();
- ctx.beginPath();
- ctx.moveTo(cX(x1), cY(y1));
- ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.fillStyle = 'white';
- ctx.fill();
- ctx.closePath();
-
-
-
- // Draw the P3 point (with a line to P1)
- ctx.beginPath();
- ctx.strokeStyle = 'red';
- ctx.moveTo(cX(x2), cY(y2));
- ctx.lineTo(cX(1), cY(1));
- ctx.stroke();
- ctx.closePath();
-
- ctx.beginPath();
- ctx.moveTo(cX(x2), cY(y2));
- ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.fill();
- ctx.closePath();
-
- // Draw the P1(1,1) point (with dashed hints)
- ctx.beginPath();
- ctx.moveTo(cX(1), cY(1));
- ctx.strokeStyle = 'lightgrey';
- ctx.lineTo(cX(0), cY(1));
- ctx.moveTo(cX(1), cY(1));
- ctx.lineTo(cX(1), cY(0));
- ctx.stroke();
- ctx.closePath();
-
- ctx.beginPath();
- ctx.strokeStyle = "black";
- ctx.fillStyle = "black";
- ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
- ctx.fill();
- ctx.stroke();
- ctx.closePath();
-
-
- // Draw the P0(0,0) point
- ctx.beginPath();
- ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
- ctx.fill();
- ctx.stroke();
- ctx.closePath();
-
-
- } else {
- alert('You need Safari or Firefox 1.5+ to see this demo.');
- }
-}
-
-function mouseDown(e) {
-
- var canvas = document.getElementById('bezier');
-
- var x1 = cX(document.getElementById('x1').value);
- var y1 = cY(document.getElementById('y1').value);
-
- var x = e.pageX - canvas.offsetLeft;
- var y = e.pageY - canvas.offsetTop;
-
- var output = document.getElementById('output');
- output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
-
-
- if ((x1 + radius &gt;= x) &amp;&amp; (x1 - radius &lt;= x) &amp;&amp; (y1 + radius &gt;= y) &amp;&amp; (y1 - radius &lt;= y)) {
- var output = document.getElementById('output');
- output.value = "P1!";
- dragSM = 1;
- }
-
- var x2 = cX(document.getElementById('x2').value);
- var y2 = cY(document.getElementById('y2').value);
-
- if ((x2 + radius &gt;= x) &amp;&amp; (x2 - radius &lt;= x) &amp;&amp; (y2 + radius &gt;= y) &amp;&amp; (y2 - radius &lt;= y)) {
- var output = document.getElementById('output');
- output.value = "P2!";
- dragSM = 2;
- }
-
- // If we are starting a drag
- if (dragSM != 0) {
- canvas.onmousemove = mouseMove;
- }
-}
-
-function mouseUp(e) {
-
- var output = document.getElementById('output');
- output.value = "Mouse up!";
- dragSM = 0;
- canvas.onmousemove = null;
-}
-
-function mouseMove(e) {
- if (dragSM != 0) {
- var canvas = document.getElementById('bezier');
-
- var x = e.pageX - canvas.offsetLeft;
- var y = e.pageY - canvas.offsetTop;
-
- var output = document.getElementById('output');
- output.value = "Drag!";
-
- if (dragSM == 1) {
- var x1 = document.getElementById('x1');
- var y1 = document.getElementById('y1');
- x1.value = reverseX(x);
- x1.value = Math.round(x1.value * 10000) / 10000;
- y1.value = reverseY(y);
- y1.value = Math.round(y1.value * 10000) / 10000;
- if (x1.value &lt; 0) { x1.value = 0; }
- if (x1.value &gt; 1) { x1.value = 1; }
- } else if (dragSM == 2) {
- var x2 = document.getElementById('x2');
- var y2 = document.getElementById('y2');
- x2.value = reverseX(x);
- x2.value = Math.round(x2.value * 10000) / 10000;
- y2.value = reverseY(y);
- y2.value = Math.round(y2.value * 10000) / 10000;
- if (x2.value &lt; 0) { x2.value = 0; }
- if (x2.value &gt; 1) { x2.value = 1; }
- }
- updateCanvas();
- }
-}
-
-initCanvas();
-updateCanvas();
- </pre>
-</div>
-
-<p>{{draft}}</p>
-
-<p><span class="seoSummary">Dies ist ein Beispielwerkzeug; es erlaubt die Bearbeitung von Bezierkurven. Es ist noch nicht wirklich nützlich, wird es aber sein!</span></p>
-
-<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p>
-</div>
diff --git a/files/de/orphaned/web/css/transform-function/translatex/index.html b/files/de/orphaned/web/css/transform-function/translatex/index.html
deleted file mode 100644
index e9530b46e4..0000000000
--- a/files/de/orphaned/web/css/transform-function/translatex/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: translateX()
-slug: orphaned/Web/CSS/transform-function/translateX
-tags:
- - CSS
- - CSS Funktion
- - CSS Tranformation
- - Funktion
- - Referenz
-translation_of: Web/CSS/transform-function/translateX
-original_slug: Web/CSS/transform-function/translateX
----
-<div>{{CSSRef}}</div>
-
-<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateX()</code></strong> positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("&lt;transform-function&gt;")}} Datentyp.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p>
-
-<div class="note">
-<p><strong>Hinweis:</strong> <code>translateX(tx)</code> ist dasselbe wie <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> oder <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code>.</p>
-</div>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush: css notranslate">/* &lt;length-percentage&gt; values */
-transform: translateX(200px);
-transform: translateX(50%);
-</pre>
-
-<h3 id="Werte">Werte</h3>
-
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.</dd>
-</dl>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th>
- <th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th>
- <th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th>
- <th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td colspan="1" rowspan="2">
- <p>Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</p>
- </td>
- <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
- <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
- <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
- </tr>
- <tr>
- <td><code>[1 0 0 1 t 0]</code></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Formale_Syntax">Formale Syntax</h2>
-
-<pre class="syntaxbox notranslate">translateX({{cssxref("&lt;length-percentage&gt;")}})
-</pre>
-
-<h2 id="Examples" name="Examples">Beispiel</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
-&lt;div class="moved"&gt;Moved&lt;/div&gt;
-&lt;div&gt;Static&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">div {
- width: 60px;
- height: 60px;
- background-color: skyblue;
-}
-
-.moved {
- transform: translateX(10px); /* Equal to translate(10px) */
- background-color: pink;
-}
-</pre>
-
-<h3 id="Ergebnis">Ergebnis</h3>
-
-<p>{{EmbedLiveSample("Examples", 250, 250)}}</p>
-
-<h2 id="Spezifikation">Spezifikation</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spezifikation</th>
- <th scope="col">Status</th>
- <th scope="col">Kommentar</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
- <td>{{Spec2("CSS3 Transforms")}}</td>
- <td>Ursprüngliche Definition</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
-
-<p>{{Compat("css.types.transform-function")}}</p>
-
-<h2 id="Siehe_auch">Siehe auch</h2>
-
-<ul>
- <li>{{cssxref("translate")}}</li>
- <li><code><a href="/de/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></li>
- <li><code><a href="/de/docs/Web/CSS/transform-function/translateZ()">translateZ()</a></code></li>
- <li><code><a href="/de/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>