diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-11 19:00:14 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-11 19:00:14 -0500 |
| commit | ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 (patch) | |
| tree | 4ca1fd3d01433b96fce40c473a3b6b272be393eb /files/de/web/css | |
| parent | d192fb918b0e2aa8869de6dcc59de8464b6e879a (diff) | |
| download | translated-content-ba5d6f9610d6bb352eecfa3ded1bb99bc9892916.tar.gz translated-content-ba5d6f9610d6bb352eecfa3ded1bb99bc9892916.tar.bz2 translated-content-ba5d6f9610d6bb352eecfa3ded1bb99bc9892916.zip | |
dump 2020-12-11
Diffstat (limited to 'files/de/web/css')
13 files changed, 2440 insertions, 0 deletions
diff --git a/files/de/web/css/css_functions/index.html b/files/de/web/css/css_functions/index.html new file mode 100644 index 0000000000..648c96c2c0 --- /dev/null +++ b/files/de/web/css/css_functions/index.html @@ -0,0 +1,255 @@ +--- +title: CSS Funktionsnotation +slug: Web/CSS/CSS_Functions +tags: + - CSS + - CSS Datentypen + - CSS Funktion + - Funktionen + - Funktionsnotation + - Referenz + - Typen + - datentpen +translation_of: Web/CSS/CSS_Functions +--- +<div>{{CSSRef}}</div> + +<p>Die CSS-Funktionsnotation ist ein Typ von <a href="/de/docs/Web/CSS/CSS_Values_and_Units">CSS-Werten</a>, der komplexere Datentypen darstellen oder spezielle Datenverarbeitungen oder Berechnungen aufrufen kann.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">selector { + property: functional-notation( [argument]? [, argument]! ); +}</pre> + +<p>Die Syntax beginnt mit dem <strong>Namen der funktionalen Notation</strong>, gefolgt von einer linken Klammer <code>(</code>. Als Nächstes folgen das/die Notationsargument(e), und die Funktion wird mit einer schließenden Klammer <code>)</code> abgeschlossen.</p> + +<p>Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern sind sie optional. In einigen Funktionsnotationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.</p> + +<h2 id="Index">Index</h2> + +<p>Zu den funktionalen Notationen, die durch eine Reihe von CSS-Spezifikationen definiert sind, gehören die folgenden:</p> + +<div class="index"><span>A</span> + +<ul> + <li>{{CSSxRef("abs", "abs()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("acos", "acos()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)</li> + <li>{{CSSxRef("asin", "asin()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("atan", "atan()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("atan2", "atan2()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("attr")}}</li> +</ul> +<span>B</span> + +<ul> + <li>{{CSSxRef("filter-function/blur", "blur()")}} (filter)</li> + <li>{{CSSxRef("filter-function/brightness", "brightness()")}} (filter)</li> +</ul> +<span>C</span> + +<ul> + <li>{{CSSxRef("calc")}} (math)</li> + <li>{{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)</li> + <li>{{CSSxRef("circle", "circle()")}} (shape)</li> + <li>{{CSSxRef("clamp")}} (math)</li> + <li>{{CSSxRef("color()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("conic-gradient")}}</li> + <li>{{CSSxRef("cos", "cos()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("counter")}}</li> + <li>{{CSSxRef("counters")}}</li> + <li>{{CSSxRef("filter-function/contrast", "contrast()")}} (filter)</li> + <li>{{CSSxRef("cross-fade")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("cubic-bezier", "cubic-bezier()")}}</li> +</ul> +<span>D</span> + +<ul> + <li>{{CSSxRef("device-cmyk", "device-cmyk()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)</li> +</ul> +<span>E</span> + +<ul> + <li>{{CSSxRef("element")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("env")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("ellipse", "ellipse()")}} (shape)</li> + <li>{{CSSxRef("exp", "exp()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>F</span> + +<ul> + <li>{{CSSxRef("fit-content()", "fit-content()")}}</li> + <li>{{CSSxRef("format", "format()")}}</li> +</ul> +<span>G</span> + +<ul> + <li>{{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)</li> +</ul> +<span>H</span> + +<ul> + <li>{{CSSxRef("hsl", "hsl()")}} (colors)</li> + <li>{{CSSxRef("hsla", "hsla()")}} (colors)</li> + <li>{{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)</li> + <li>{{CSSxRef("hwb", "hwb()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("hypot", "hypot()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>I</span> + +<ul> + <li>{{CSSxRef("imagefunction", "image()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("image-set")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset()")}} (shape)</li> + <li>{{CSSxRef("filter-function/invert", "invert()")}} (filter)</li> +</ul> +<span>L</span> + +<ul> + <li>{{CSSxRef("lab", "lab()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("lch", "lch()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("leader", "leader()")}}</li> + <li>{{CSSxRef("linear-gradient")}}</li> + <li>{{CSSxRef("local", "local()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("log", "log()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>M</span> + +<ul> + <li>{{CSSxRef("transform-function/matrix", "matrix()")}} (transform)</li> + <li>{{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)</li> + <li>{{CSSxRef("max")}} (math)</li> + <li>{{CSSxRef("min")}} (math)</li> + <li>{{CSSxRef("minmax")}} (math)</li> + <li>{{CSSxRef("mod", "mod()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>O</span> + +<ul> + <li>{{CSSxRef("filter-function/opacity", "opacity()")}} (filter)</li> + <li>{{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)</li> +</ul> +<span>P</span> + +<ul> + <li>{{CSSxRef("paint")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("path()", "path()")}} (shape)</li> + <li>{{CSSxRef("transform-function/perspective", "perspective()")}} (transform)</li> + <li>{{CSSxRef("polygon", "polygon()")}} (shape)</li> + <li>{{CSSxRef("pow", "pow()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>R</span> + +<ul> + <li>{{CSSxRef("radial-gradient")}}</li> + <li>{{CSSxRef("rem", "rem()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("repeat")}}</li> + <li>{{CSSxRef("repeating-linear-gradient")}}</li> + <li>{{CSSxRef("repeating-radial-gradient")}}</li> + <li>{{CSSxRef("repeating-conic-gradient")}}</li> + <li>rgb() (colors)</li> + <li>rgba() (colors)</li> + <li>{{CSSxRef("transform-function/rotate", "rotate()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)</li> + <li>{{CSSxRef("round", "round()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>S</span> + +<ul> + <li>{{CSSxRef("filter-function/saturate", "saturate()")}} (filter)</li> + <li>{{CSSxRef("transform-function/scale", "scale()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)</li> + <li>{{CSSxRef("filter-function/sepia", "sepia()")}} (filter)</li> + <li>{{CSSxRef("sign", "sign()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("sin", "sin()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("transform-function/skew", "skew()")}} (transform)</li> + <li>{{CSSxRef("transform-function/skewX", "skewX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/skewY", "skewY()")}} (transform)</li> + <li>{{CSSxRef("sqrt", "sqrt()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("steps", "steps()")}}</li> + <li>{{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)</li> + <li>{{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)</li> + <li>{{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)</li> + <li>{{CSSxRef("symbols", "symbols()")}}</li> +</ul> +<span>T</span> + +<ul> + <li>{{CSSxRef("tan", "tan()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("target-counter", "target-counter()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("target-counters", "target-counters()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("target-text", "target-text()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("toggle", "toggle()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("transform-function/translate", "translate()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translateX", "translateX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translateY", "translateY()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)</li> +</ul> +<span>U</span> + +<ul> + <li>{{CSSxRef("url()", "url()")}}</li> +</ul> +<span>V</span> + +<ul> + <li>{{CSSxRef("var")}}</li> +</ul> +</div> + +<h2 id="Spezifikationen">Spezifikationen</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("CSS4 Values")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Hinzugefügte Funktionsnotation <code>toggle()</code>, <code>attr()</code>, <code>calc()</code>, <code>min()</code>, <code>max()</code>, <code>clamp()</code>, <code>round()</code>, <code>mod()</code>, <code>rem()</code>, <code>mod()</code>, <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>, <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, <code>exp()</code>, <code>abs()</code> und <code>sign()</code>.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Fügt die Funktionsnotation <code>calc()</code> zu.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td>{{Spec2("CSS4 Colors")}}</td> + <td>Fügt kommmalose Syntaxen für die funktionale Notation <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, und <code>hsla()</code> hinzu.<br> + Erlaubt Alpha-Werte in <code>rgb()</code> und <code>hsl()</code>, und macht <code>rgba()</code> und <code>hsla()</code> into (deprecated) zu (veralteten) Aliasen für diese.<br> + Fügt die Funktionen <code>hwb()</code>, <code>device-cmyk()</code> und <code>color()</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Colors")}}</td> + <td>{{Spec2("CSS3 Colors")}}</td> + <td>Fügt <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> als funktionale Notation hinzu.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Images")}}</td> + <td>{{Spec2("CSS4 Images")}}</td> + <td>Fügt <code>element()</code>, <code>image()</code>, <code>image-set()</code> und <code>conic-gradient()</code> als Funktionsnotation hinzu.</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Werte und Einheiten</a></li> + <li><a href="/de/docs/Learn/CSS/Building_blocks/Werten_Einheiten">Einführung zu CSS: Werte und Einheiten</a></li> +</ul> diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..40e655caef --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,152 @@ +--- +title: Stapeln mit fließenden Blöcken +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +tags: + - CSS + - CSS z-index + - CSS z-index verstehen + - Fortgeschritten + - Leitfaden + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<div>{{cssref}}</div> + +<p>Bei fließenden Blöcken (<a href="/de/docs/Web/CSS/float"><code>float</code></a>) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:</p> + +<ol> + <li>Der Hintergrund und die Ränder des Wurzelelements</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li> + <li>Fließende Blöcke</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei</li> +</ol> + +<p>Wie Sie im Beispiel unten sehen können, sind Hintergrund und Rahmen des nicht positionierten Blocks (DIV #4) von fließenden Blöcken völlig unbeeinflusst, der Inhalt ist jedoch betroffen. Dies geschieht gemäß dem Standard-Float-Verhalten. Dieses Verhalten kann mit einer zusätzlichen Regel in der obigen Liste dargestellt werden:</p> + +<ol> + <li>Der Hintergrund und die Ränder des Wurzelelements</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li> + <li>Schwebende Blöcke</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht-positionierte</a> Inline-Elemente</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML</li> +</ol> + +<p><img alt="Example of stacking rules with floating boxes" class="internal" src="/@api/deki/files/911/=Understanding_zindex_02.png"></p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn ein Deckkraftwert (<code><a href="/de/docs/Web/CSS/opacity">opacity</a></code>) auf den nicht positionierten Block (DIV #4) angewendet wird, passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks ragen über die schwebenden Blöcke und die positionierten Blöcke hinaus. Das liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines Deckkraftwerts erzeugt einen neuen Stapelkontext (siehe <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a>).</p> +</div> + +<h2 id="Quellcode_für_das_Beispiel">Quellcode für das Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="abs1"> + <b>DIV #1</b><br />position: absolute;</div> + +<div id="flo1"> + <b>DIV #2</b><br />float: left;</div> + +<div id="flo2"> + <b>DIV #3</b><br />float: right;</div> + +<br /> + +<div id="sta1"> + <b>DIV #4</b><br />no positioning</div> + +<div id="abs2"> + <b>DIV #5</b><br />position: absolute;</div> + +<div id="rel1"> + <b>DIV #6</b><br />position: relative;</div> + +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + padding: 10px; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + height: 100px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 10px 0px 10px; + text-align: left; +} + +#flo1 { + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#flo2 { + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#abs2 { + position: absolute; + width: 150px; + height: 100px; + top: 80px; + left: 100px; + border: 1px dashed #990; + background-color: #fdd; +} + +#rel1 { + position: relative; + border: 1px dashed #996; + background-color: #cff; + margin: 0px 10px 0px 10px; + text-align: left; +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Stapeln mit z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it" rel="noopener">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external external-icon" href="http://creativecommons.org/licenses/by-sa/2.0/" rel="noopener">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 3. November 2004</li> +</ul> +</div> diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..b1a48f0ebc --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,132 @@ +--- +title: Stapelkontext Beispiel 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<div>{{cssref}}</div> + +<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h2 id="Stapelkontext_Beispiel_1">Stapelkontext Beispiel 1</h2> + +<p>Lassen Sie uns mit einem einfachen Beispiel beginnen. Im Wurzel-Stapelkontext haben wir zwei DIVs (DIV #1 und DIV #3), beide relativ positioniert, aber ohne {{cssxref("z-index")}} Eigenschaften. Innerhalb von DIV #1 befindet sich ein absolut positioniertes DIV #2, während sich in DIV #3 ein absolut positioniertes DIV #4 befindet, beide ohne <code>z-index</code> Eigenschaften.</p> + +<p>Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>Wenn DIV #2 ein positiver <code>z-index</code> Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>Wenn dann DIV #4 ebenfalls einen positiven <code>z-index</code> zugewiesen bekommt, der größer ist als der <code>z-index</code> von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>In diesem letzten Beispiel können Sie sehen, dass DIV #2 und DIV #4 keine Geschwister sind, da sie zu verschiedenen Eltern in der Hierarchie der HTML-Elemente gehören. Trotzdem kann die Stapelung von DIV #4 in Bezug auf DIV #2 durch <code>z-index</code> gesteuert werden. Da DIV #1 und DIV #3 kein z-index-Wert zugewiesen ist, bilden sie keinen Stapelkontext. Das bedeutet, dass ihr gesamter Inhalt, einschließlich DIV #2 und DIV #4, zu demselben Wurzel-Stacking-Kontext gehört.</p> + +<p>In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:</p> + +<ul> + <li>Wurzel-Stapelkontext + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>Hinweis:</strong> DIV #1 und DIV #3 sind nicht lichtdurchlässig. Es ist wichtig, sich daran zu erinnern, dass das Zuweisen einer Deckkraft von weniger als 1 zu einem positionierten Element implizit einen Stapelkontext erzeugt, genau wie das Hinzufügen eines <code>z-index</code> Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 1; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +</body></html> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.bold { + font-weight: bold; + font: 12px Arial; +} +#div1, +#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 9. Juli 2005</li> +</ul> +</div> diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..bff33304e9 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,140 @@ +--- +title: Stapelkontext Beispiel 2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<div>{{cssref}}</div> + +<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h2 id="Stapelkontext_Beispiel_2">Stapelkontext Beispiel 2</h2> + +<p>Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des <em>Stapelkontexts</em>. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270') }}</p> + +<p>Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) liegt, da beide zum selben Stapelkontext gehören (dem Wurzel-Kontext), so dass die <code>z-index</code> Werte bestimmen, wie Elemente gestapelt werden.</p> + +<p>Was als merkwürdig angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrer z-index Werte. Der Grund dafür ist, dass sie nicht zum selben Stapelkontext gehören. DIV #4 gehört zu dem Stacking-Kontext, der durch DIV #3 erzeugt wurde, und wie bereits erklärt, befindet sich DIV #3 (und sein gesamter Inhalt) unter DIV #2.</p> + +<p>Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:</p> + +<ul> + <li>Wurzel-Stapelkontext + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>Hinweis:</strong> Es ist zu beachten, dass sich die HTML-Hierarchie im Allgemeinen von der Stapelkontexthierarchie unterscheidet. In der Stapelkontexthierarchie werden Elemente, die keinen Stapelkontext erzeugen, an ihrem übergeordneten Element zusammengeklappt.</div> + +<h2 id="Example_source_code" name="Example_source_code">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + + <br /> + + <div id="div1"><br /> + <span class="bold">DIV #1</span><br /> + position: relative; + <div id="div2"><br /> + <span class="bold">DIV #2</span><br /> + position: absolute;<br /> + z-index: 2; + </div> + </div> + + <br /> + + <div id="div3"><br /> + <span class="bold">DIV #3</span><br /> + position: relative;<br /> + z-index: 1; + <div id="div4"><br /> + <span class="bold">DIV #4</span><br /> + position: absolute;<br /> + z-index: 10; + </div> + </div> + +</body> +</html> +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende Elemente beim Stapeln behandelt werden.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 9. July 2005</li> +</ul> +</div> diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..165cd88bd6 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,186 @@ +--- +title: Stapelkontext Beispiel 3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<div>{{cssref}}</div> + +<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h2 id="Stapelkontext_Beispiel_3">Stapelkontext Beispiel 3</h2> + +<p>Dieses letzte Beispiel zeigt Probleme, die entstehen, wenn mehrere positionierte Elemente in einer mehrstufigen HTML-Hierarchie gemischt werden und wenn z-Indizes über Klassenselektoren zugewiesen werden.</p> + +<p>Nehmen wir als Beispiel ein hierarchisches Menü mit drei Ebenen, das aus mehreren positionierten DIVs besteht. Die DIVs der zweiten und dritten Ebene erscheinen, wenn man mit dem Mauszeiger über die übergeordneten Elemente fährt oder auf sie klickt. Normalerweise wird diese Art von Menü entweder clientseitig oder serverseitig per Skript generiert, so dass die Stilregeln mit einem Klassenselektor anstelle des id-Selektors zugewiesen werden.If the three menu levels partially overlap, then managing stacking could become a problem.</p> + +<p>Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330') }}</p> + +<p>Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.</p> + +<p>Das Menü der zweiten Ebene wird absolut innerhalb des übergeordneten Elements positioniert. Um es über alle Menüs der ersten Ebene zu legen, wird ein <code>{{cssxref("z-index")}}</code> verwendet. Das Problem ist, dass für jedes Menü der zweiten Ebene ein Stapelkontext erzeugt wird und jedes Menü der dritten Ebene zum Kontext seines Elternelements gehört.</p> + +<p>Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben <code>z-index</code> Wert haben und die Standard-Stapelregeln gelten.</p> + +<p>Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:</p> + +<ul> + <li>Wurzel-Stapelkontext + <ul> + <li>LEVEL #1 + <ul> + <li>LEVEL #2 (z-index: 1) + <ul> + <li>LEVEL #3</li> + <li>...</li> + <li>LEVEL #3</li> + </ul> + </li> + <li>LEVEL #2 (z-index: 1)</li> + <li>...</li> + <li>LEVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>LEVEL #1</li> + <li>...</li> + <li>LEVEL #1</li> + </ul> + </li> +</ul> + +<p>Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) <code>z-index</code> Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.</p> + +<div class="note"><strong>Hinweis:</strong> Im Quellcode sehen Sie, dass die Menüs der zweiten und dritten Ebene aus mehreren DIVs bestehen, die in einem absolut positionierten Container enthalten sind. Dies ist nützlich, um sie alle auf einmal zu gruppieren und zu positionieren.</div> + +<h2 id="Example_source_code" name="Example_source_code">Beispiel Quellcode</h2> + +<pre class="brush: html notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + + <div id="container2"> + + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende Elemente (<code>float</code>) beim Stapeln behandelt werden.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 9. Juli 2005</li> +</ul> +</div> + +<p><strong>Hinweis:</strong> Der Grund, warum das Beispielbild falsch aussieht - mit der zweiten Ebene 2, die die Menüs der Ebene 3 überlagert - ist, dass die Ebene 2 Deckkraft hat, was einen neuen Stapelungskontext erzeugt. Im Grunde ist diese ganze Beispielseite falsch und irreführend.</p> diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..4711fcdaef --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,128 @@ +--- +title: Stapeln ohne die Eigenschaft z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - CSS + - CSS z-index + - CSS z-index verstehen + - Fortgeschritten + - Leitfaden + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<div>{{cssref}}</div> + +<p>Wenn die <a href="/de/docs/Web/CSS/">CSS</a>-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):</p> + +<ol> + <li>Der Hintergrund und die Ränder des Wurzelelements</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei</li> +</ol> + +<p>Beachten Sie, dass die CSS-Eigenschaft {{cssxref("order")}}, wenn sie das Rendering von der "Reihenfolge des Erscheinens im HTML" innerhalb von {{cssxref("flex")}}-Containern ändert, auch die Reihenfolge für den Stapelkontext beeinflusst.</p> + +<p>Im folgenden Beispiel sind die Elemente #1 bis #4 positionierte Elemente. Element Nr. 5 ist statisch und wird daher unter den anderen vier Elementen gezeichnet, obwohl es im HTML-Markup später kommt.</p> + +<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p> + +<h2 id="Quellcode_für_das_Beispiel">Quellcode für das Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="abs1" class="absolute"> + <b>DIV #1</b><br />position: absolute;</div> +<div id="rel1" class="relative"> + <b>DIV #2</b><br />position: relative;</div> +<div id="rel2" class="relative"> + <b>DIV #3</b><br />position: relative;</div> +<div id="abs2" class="absolute"> + <b>DIV #4</b><br />position: absolute;</div> +<div id="sta1" class="static"> + <b>DIV #5</b><br />position: static;</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">b { + font-family: sans-serif; +} + +div { + padding: 10px; + border: 1px dashed; + text-align: center; +} + +.static { + position: static; + height: 80px; + background-color: #ffc; + border-color: #996; +} + +.absolute { + position: absolute; + width: 150px; + height: 350px; + background-color: #fdd; + border-color: #900; + opacity: 0.7; +} + +.relative { + position: relative; + height: 80px; + background-color: #cfc; + border-color: #696; + opacity: 0.7; +} + +#abs1 { + top: 10px; + left: 10px; +} + +#rel1 { + top: 30px; + margin: 0px 50px 0px 50px; +} + +#rel2 { + top: 15px; + left: 20px; + margin: 0px 50px 0px 50px; +} + +#abs2 { + top: 10px; + right: 10px; +} + +#sta1 { + background-color: #ffc; + margin: 0px 50px 0px 50px; +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken:</a> Wie fließende (<code>float</code>) Elemente beim Stapeln behandelt werden.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 3. November 2004</li> +</ul> +</div> diff --git a/files/de/web/css/css_values_and_units/index.html b/files/de/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..7cde234d24 --- /dev/null +++ b/files/de/web/css/css_values_and_units/index.html @@ -0,0 +1,493 @@ +--- +title: CSS values and units +slug: Web/CSS/CSS_Values_and_Units +translation_of: Web/CSS/CSS_Values_and_Units +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept.</span> Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.</p> + +<h2 id="Textual_data_types">Textual data types</h2> + +<ul> + <li>{{cssxref("<custom-ident>")}}</li> + <li>Pre-defined keywords as an <code><ident></code></li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<url>")}}</li> +</ul> + +<p>Text data types are either <code><string></code>, a quoted series of characters, or an <code><ident></code>, a "CSS Identifier" which is an unquoted string. A <code><string></code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code><ident></code> or <code><custom-ident></code>, must be unquoted.</p> + +<p>In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, or both.</p> + +<p>When both quoted and unquoted user defined text values are permitted, the specification will list <code><custom-ident> | <string></code>, meaning quotes are optional, such as is the case with animation names:</p> + +<pre class="brush: css notranslate">@keyframe validIdent { + /* keyframes go here */ +} +@keyframe 'validString' { + /* keyframes go here */ +}</pre> + +<p>Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <code><custom-ident></code>, so if we had a grid area named <code>content</code> we would use it without quotes:</p> + +<pre class="brush: css notranslate">.item { + grid-area: content; +} +</pre> + +<p>In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:</p> + +<pre class="brush: css notranslate">.item::after { + content: "This is my content."; +} +</pre> + +<p>While you can generally create any name you want, including using emojis, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("<custom-ident>")}} and {{cssxref("<string>")}} reference pages for more details.</p> + +<h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3> + +<p>Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.</p> + +<p>When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.</p> + +<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre> + +<p>Such values are used without quotes:</p> + +<pre class="brush: css notranslate"><code>.box { + float: left; +} +</code></pre> + +<h3 id="CSS-wide_values">CSS-wide values</h3> + +<p>In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.</p> + +<p>The <code>initial</code> keyword represents the value specified as the property’s initial value. The <code>inherit</code> keyword represents the computed value of the property on the element’s parent, provided it is inherited.</p> + +<p>The <code>unset</code> keyword acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not.</p> + +<p>A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.</p> + +<h3 id="URLs">URLs</h3> + +<p>A {{cssxref("<url>")}} type uses functional notation, which accepts a <code><string></code> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url("images/my-background.png"); +}</code> + +<code>.box { + background-image: url("https://www.exammple.com/images/my-background.png"); +}</code> +</pre> + +<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code><url-token></code>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}} for more information.</p> + +<h2 id="Numeric_data_types">Numeric data types</h2> + +<ul> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<dimension>")}}</li> + <li>{{cssxref("<percentage>")}}</li> +</ul> + +<h3 id="Integers">Integers</h3> + +<p>An integer is one or more decimal digits, <code>0</code> through <code>9</code>, such as <code>1024</code> or <code>-55</code>. An integer may be preceded by a <code>+</code> or <code>-</code> symbol, with no space between the symbol and the integer.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code> or <code>-1.2</code>. Numbers may also be preceded by a <code>+</code> or <code>-</code> symbol.</p> + +<h3 id="Dimensions">Dimensions</h3> + +<p>A {{cssxref("<dimension>")}} is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>100ms</code>, or <code>10px</code>. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. <code>1 cm</code> is not valid.</p> + +<p>CSS uses dimensions to specify:</p> + +<ul> + <li>{{cssxref("<length>")}} (Distance units)</li> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<resolution>")}}</li> +</ul> + +<p>These are all covered in subsections below.</p> + +<h4 id="Distance_units">Distance units</h4> + +<p>Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("<length>")}} type. There are two types of lengths in CSS: relative and absolute.</p> + +<p>Relative length units specify a length in relation to something else. For example, <code>em</code> is relative to the font size on the element and <code>vh</code> is relative to the viewport height.</p> + +<table class="standard-table"> + <caption> + <h4 id="Relative_length_units">Relative length units</h4> + </caption> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Relative to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>Font size of the element.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>x-height of the element's font.</td> + </tr> + <tr> + <td><code>cap</code></td> + <td>Cap height (the nominal height of capital letters) of the element's font.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td> + </tr> + <tr> + <td><code>ic</code></td> + <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>Font size of the root element.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>Line height of the element.</td> + </tr> + <tr> + <td><code>rlh</code></td> + <td>Line height of the root element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>1% of viewport's width.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>1% of viewport's height.</td> + </tr> + <tr> + <td><code>vi</code></td> + <td>1% of viewport's size in the root element's inline axis.</td> + </tr> + <tr> + <td><code>vb</code></td> + <td>1% of viewport's size in the root element's block axis.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>1% of viewport's smaller dimension.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1% of viewport's larger dimension.</td> + </tr> + </tbody> +</table> + +<p>Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p> + +<table class="standard-table"> + <caption> + <h4 id="Absolute_length_units">Absolute length units</h4> + </caption> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Equivalent to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/16th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>When including a length value, if the length is <code>0</code>, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.</p> + +<h4 id="Angle_units">Angle units</h4> + +<p>Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>deg</code></td> + <td>Degrees</td> + <td>There are 360 degrees in a full circle.</td> + </tr> + <tr> + <td><code>grad</code></td> + <td>Gradians</td> + <td>There are 400 gradians in a full circle.</td> + </tr> + <tr> + <td><code>rad</code></td> + <td>Radians</td> + <td>There are 2π radians in a full circle.</td> + </tr> + <tr> + <td><code>turn</code></td> + <td>Turns</td> + <td>There is 1 turn in a full circle.</td> + </tr> + </tbody> +</table> + +<h4 id="Time_units">Time units</h4> + +<p>Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>s</code></td> + <td>Seconds</td> + <td></td> + </tr> + <tr> + <td><code>ms</code></td> + <td>Milliseconds</td> + <td>There are 1,000 milliseconds in a second.</td> + </tr> + </tbody> +</table> + +<h4 id="Frequency_units">Frequency units</h4> + +<p>Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Hz</code></td> + <td>Hertz</td> + <td>Represents the number of occurrences per second.</td> + </tr> + <tr> + <td><code>kHz</code></td> + <td>KiloHertz</td> + <td>A kiloHertz is 1000 Hertz.</td> + </tr> + </tbody> +</table> + +<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p> + +<h4 id="Resolution_unit">Resolution unit</h4> + +<p>Resolution units are represented by the type {{cssxref("<resolution>")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>dpi</code></td> + <td>Dots per inch.</td> + </tr> + <tr> + <td><code>dpcm</code></td> + <td>Dots per centimetre.</td> + </tr> + <tr> + <td><code>dppx</code>, <code>x</code></td> + <td>Dots per px unit.</td> + </tr> + </tbody> +</table> + +<h3 id="Percentages">Percentages</h3> + +<p>A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.</p> + +<p>Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.</p> + +<p>As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:</p> + +<pre class="brush: css notranslate">.box { + width: 50%; +}</pre> + +<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3> + +<p>Some properties accept a dimension that could be either one of two types, for example a <code><length></code> <strong>or</strong> a <code><percentage></code>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:</p> + +<ul> + <li>{{cssxref("<frequency-percentage>")}}</li> + <li>{{cssxref("<angle-percentage>")}}</li> + <li>{{cssxref("<time-percentage>")}}</li> +</ul> + +<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3> + +<ul> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<position>")}}</li> +</ul> + +<h4 id="Color">Color</h4> + +<p>The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p> + +<h4 id="Image">Image</h4> + +<p>The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p> + +<h4 id="Position">Position</h4> + +<p>The {{cssxref("<position>")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a {{cssxref("background-position")}} and therefore specified in the <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p> + +<h3 id="Functional_notation">Functional notation</h3> + +<ul> + <li>{{cssxref("calc()")}}</li> + <li>{{cssxref("min", "min()")}}</li> + <li>{{cssxref("max", "max()")}}</li> + <li>{{cssxref("clamp", "clamp()")}}</li> + <li>{{cssxref("toggle", "toggle()")}}</li> + <li>{{cssxref("attr", "attr()")}}</li> +</ul> + +<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">Functional notation</a> is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p> + +<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p> + +<p>Some legacy functional notations such as <code>rgba()</code> use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.</p> + +<h2 id="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("CSS4 Values")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br> + Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br> + Adds <code>toggle()</code></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td>{{Spec2("CSS4 Colors")}}</td> + <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br> + Adds color keyword <code>rebeccapurple</code>.<br> + Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br> + Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Colors")}}</td> + <td>{{Spec2("CSS3 Colors")}}</td> + <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Images")}}</td> + <td>{{Spec2("CSS4 Images")}}</td> + <td> + <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p> + </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Images")}}</td> + <td>{{Spec2("CSS3 Images")}}</td> + <td>Initial definition of image.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li> +</ul> diff --git a/files/de/web/css/transform-function/index.html b/files/de/web/css/transform-function/index.html new file mode 100644 index 0000000000..7ad06db5c7 --- /dev/null +++ b/files/de/web/css/transform-function/index.html @@ -0,0 +1,295 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Data Type + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code><transform-function></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation <a href="/en-US/docs/Web/CSS/CSS_Functions">functions</a> can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><transform-function></code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p> + +<h3 id="Matrix_transformation">Matrix transformation</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> + <dd>Describes a homogeneous 2D transformation matrix.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd> +</dl> + +<h3 id="Perspective">Perspective</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dd>Sets the distance between the user and the z=0 plane.</dd> +</dl> + +<h3 id="Rotation">Rotation</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dd>Rotates an element around a fixed point on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dd>Rotates an element around a fixed axis in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> + <dd>Rotates an element around the horizontal axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> + <dd>Rotates an element around the vertical axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> + <dd>Rotates an element around the z-axis.</dd> +</dl> + +<h3 id="Scaling_resizing">Scaling (resizing)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dd>Scales an element up or down on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt> + <dd>Scales an element up or down in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> + <dd>Scales an element up or down horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> + <dd>Scales an element up or down vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> + <dd>Scales an element up or down along the z-axis.</dd> +</dl> + +<h3 id="Skewing_distortion">Skewing (distortion)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dd>Skews an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dd>Skews an element in the horizontal direction.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dd>Skews an element in the vertical direction.</dd> +</dl> + +<h3 id="Translation_moving">Translation (moving)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dd>Translates an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dd>Translates an element in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>Translates an element horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> + <dd>Translates an element vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> + <dd>Translates an element along the z-axis.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p> + +<h3 id="Cartesian_coordinates">Cartesian coordinates</h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right;"></a></p> + +<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p> + +<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p> + +<h3 id="Transformation_functions">Transformation functions</h3> + +<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p> + +<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>It is even possible to apply several transformations in a row:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p> + +<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p> + +<div class="note"> +<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3×3 transformation matrices, and can simply express translations as linear functions.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Transform_function_comparison">Transform function comparison</h3> + +<p>The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.</p> + +<p>Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using <code>transform3d()</code>, to allow you to see the effect of all the transforms.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><main> + <section id="example-element"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </section> + + <div class="select-form"> + <label>Select a transform function</label> + <select> + <option selected>Choose a function</option> + <option>rotate(360deg)</option> + <option>rotateX(360deg)</option> + <option>rotateY(360deg)</option> + <option>rotateZ(360deg)</option> + <option>rotate3d(1, 1, 1, 90deg)</option> + <option>scale(1.5)</option> + <option>scaleX(1.5)</option> + <option>scaleY(1.5)</option> + <option>scaleZ(1.5)</option> + <option>scale3d(1, 1.5, 1.5)</option> + <option>skew(17deg, 13deg)</option> + <option>skewX(17deg)</option> + <option>skewY(17deg)</option> + <option>translate(100px, 100px)</option> + <option>translateX(100px)</option> + <option>translateY(100px)</option> + <option>translateZ(100px)</option> + <option>translate3d(50px, 50px, 50px)</option> + <option>perspective(200px)</option> + <option>matrix(1, 2, -1, 1, 80, 80)</option> + <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> + </select> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">main { + width: 400px; + height: 200px; + padding: 50px; + background-image: linear-gradient(135deg, white, cyan, white); +} + +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} + +.select-form { + margin-top: 50px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const selectElem = document.querySelector('select'); +const example = document.querySelector('#example-element'); + +selectElem.addEventListener('change', () => { + if(selectElem.value === 'Choose a function') { + return; + } else { + example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`; + setTimeout(function() { + example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; + }, 2000) + } +})</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}</p> + +<h2 id="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('CSS Transforms 2', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Added 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS {{cssxref("transform")}} property</li> +</ul> diff --git a/files/de/web/css/transform-function/translate3d()/index.html b/files/de/web/css/transform-function/translate3d()/index.html new file mode 100644 index 0000000000..fc95451ba8 --- /dev/null +++ b/files/de/web/css/transform-function/translate3d()/index.html @@ -0,0 +1,147 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d() +tags: + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translate3d() +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaften <strong><code>translate3d()</code></strong> positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div> + +<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p> + +<p>Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">translate3d(<var>tx</var>, <var>ty</var>, <var>tz</var>) +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><var>tx</var></code></dt> + <dd>Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.</dd> + <dt><code><var>ty</var></code></dt> + <dd>Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.</dd> + <dt><code><var>tz</var></code></dt> + <dd>Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.<br> + Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.</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="2" rowspan="2"> + <p>Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.</p> + </td> + <td colspan="1" rowspan="2">Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Using_a_single_axis_translation" name="Using_a_single_axis_translation">Verwendung einer einachsigen Verschiebung</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + /* Equivalent to perspective(500px) translateX(10px) */ + transform: perspective(500px) translate3d(10px, 0, 0px); + background-color: pink; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p> + +<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">Kombinierte Z-Achsen- und X-Achsen-Verschiebung</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 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("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<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/translateX">translateX()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/de/web/css/transform-function/translatex/index.html b/files/de/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..764fd63db3 --- /dev/null +++ b/files/de/web/css/transform-function/translatex/index.html @@ -0,0 +1,125 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS Funktion + - CSS Tranformation + - Funktion + - Referenz +translation_of: 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("<transform-function>")}} 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">/* <length-percentage> values */ +transform: translateX(200px); +transform: translateX(50%); +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , 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("<length-percentage>")}}) +</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></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> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<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("<transform-function>")}}</li> +</ul> diff --git a/files/de/web/css/transform-function/translatey()/index.html b/files/de/web/css/transform-function/translatey()/index.html new file mode 100644 index 0000000000..a364b79966 --- /dev/null +++ b/files/de/web/css/transform-function/translatey()/index.html @@ -0,0 +1,123 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +tags: + - CSS + - CSS Funktion + - CSS Transfomation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateY() +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateY()</code></strong> positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>translateY(ty)</code> ist dasselbe wie <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> oder <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* <length-percentage> values */ +transform: translateY(200px); +transform: translateY(50%); +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , 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>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</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 0 t]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">translateY({{cssxref("<length-percentage>")}}) +</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(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> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("translate")}}</li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/de/web/css/transform-function/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..27e86335fd --- /dev/null +++ b/files/de/web/css/transform-function/translatez()/index.html @@ -0,0 +1,128 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateZ() +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateZ()</code></strong> positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> + +<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>Diese Transformation wird durch einen {{cssxref("<length>")}}-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.</p> + +<p>In den obigen interaktiven Beispielen wurden die Werte <code><a href="/de/docs/Web/CSS/perspective">perspective: 550px;</a></code> gesetzt, um einen 3D-Raum zu erzeugen, und <code><a href="/de/docs/Web/CSS/transform-style">transform-style: preserve-3d;</a></code>, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>translateZ(tz)</code> ist gleichzusetzen mit <code><a href="/de/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">translateZ(<var>tz</var>) +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><var>tz</var></code></dt> + <dd>Ein {{cssxref("<Länge>")}} Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.</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="2" rowspan="2">Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.</td> + <td colspan="1" rowspan="2">Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</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>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<p>In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers bewegt.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +</pre> + +<p>Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion <a href="/de/docs/Web/CSS/transform-function/perspective">perspective()</a> den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von <code>500px</code> bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.</p> + +<p>Dann verschiebt die Funktion <a href="/de/docs/Web/CSS/transform-function/translateZ()">translateZ()</a> das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Anzeigegerät betrachtet wird.</p> + +<p>Beachten Sie, wenn der <code>perspective()</code>-Wert kleiner ist als der <code>translateZ()</code>-Wert, wie z.B. <code>transform: perspective(200px) translateZ(300px);</code> das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von <code>perspective()</code> und <code>translateZ()</code> ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.</p> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<h2 id="Specifications">Specifications</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('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/translate" title="Mit der CSS-Eigenschaft translate CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft transform angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen."><code>translate</code></a></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX()">translateX()</a></code></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/translate3d()">translate3d()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/de/web/css/translate/index.html b/files/de/web/css/translate/index.html new file mode 100644 index 0000000000..ab89dae4c4 --- /dev/null +++ b/files/de/web/css/translate/index.html @@ -0,0 +1,136 @@ +--- +title: translate +slug: Web/CSS/translate +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz + - Tranformation +translation_of: Web/CSS/translate +--- +<div>{{CSSRef}}</div> + +<p>Mit der <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>translate</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> können Sie Transformationen einzeln und unabhängig von der Eigenschaft {{CSSxRef("transform")}} angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Standardwert */ +translate: none; + +/* Einzelwert */ +translate: 100px; +translate: 50%; + +/* Zwei Werte */ +translate: 100px 200px; +translate: 50% 105px; + +/* Drei Werte */ +translate: 50% 105px 5rem; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt>Einzelwert {{cssxref("<length-percentage>")}}</dt> + <dd>Ein Einzelwert als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, der eine 2D-Verschiebung angibt, die eine gleiche Verschiebung entlang der X- und Y-Achse spezifiziert. Äquivalent zu einer Funktion <code>translate()</code> (2D-Übersetzung) mit zwei angegebenen Werten.</dd> + <dt>Zwei Werte {{cssxref("<length-percentage>")}}</dt> + <dd>Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, wobei der erste Wert für die Verschiebung auf der X- und der Zweite auf der Y-Achse steht.</dd> + <dt>Drei Werte {{cssxref("<length-percentage>")}}</dt> + <dd>Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}} und ein dritter Wert im Format {{cssxref("<length>")}}, die die Verchiebung auf der X-, Y-, und Z-Achse spezifizieren. Entspricht der Funktion {{cssxref("translate3d()")}} (3D-Verschiebung).</dd> + <dt id="none"><code>none</code></dt> + <dd>Gibt an, dass keine Verschiebung angewendet werden soll.</dd> +</dl> + +<h2 id="Formale_Definition">Formale Definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div> + <p class="translate">Translation</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +html { + font-family: sans-serif; +} + +div { + width: 150px; + margin: 0 auto; +} + +p { + padding: 10px 5px; + border: 3px solid black; + border-radius: 20px; + width: 150px; + font-size: 1.2rem; + text-align: center; +} + +.translate { + transition: translate 1s; +} + +div:hover .translate { + translate: 200px 50px; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples')}}</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('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></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('scale')}}</li> + <li>{{cssxref('rotate')}}</li> + <li>{{cssxref('transform')}}</li> +</ul> + +<p>Note: skew is not an independent transform value</p> |