From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/de/web/css/attr()/index.html | 189 -------------------- files/de/web/css/attr/index.html | 190 +++++++++++++++++++++ files/de/web/css/calc()/index.html | 106 ------------ files/de/web/css/calc/index.html | 107 ++++++++++++ .../transform-function/translate3d()/index.html | 145 ---------------- .../css/transform-function/translate3d/index.html | 146 ++++++++++++++++ .../css/transform-function/translatey()/index.html | 121 ------------- .../css/transform-function/translatey/index.html | 122 +++++++++++++ .../css/transform-function/translatez()/index.html | 126 -------------- .../css/transform-function/translatez/index.html | 127 ++++++++++++++ files/de/web/css/url()/index.html | 84 --------- files/de/web/css/url/index.html | 84 +++++++++ 12 files changed, 776 insertions(+), 771 deletions(-) delete mode 100644 files/de/web/css/attr()/index.html create mode 100644 files/de/web/css/attr/index.html delete mode 100644 files/de/web/css/calc()/index.html create mode 100644 files/de/web/css/calc/index.html delete mode 100644 files/de/web/css/transform-function/translate3d()/index.html create mode 100644 files/de/web/css/transform-function/translate3d/index.html delete mode 100644 files/de/web/css/transform-function/translatey()/index.html create mode 100644 files/de/web/css/transform-function/translatey/index.html delete mode 100644 files/de/web/css/transform-function/translatez()/index.html create mode 100644 files/de/web/css/transform-function/translatez/index.html delete mode 100644 files/de/web/css/url()/index.html create mode 100644 files/de/web/css/url/index.html (limited to 'files/de/web') diff --git a/files/de/web/css/attr()/index.html b/files/de/web/css/attr()/index.html deleted file mode 100644 index 8da73fd80c..0000000000 --- a/files/de/web/css/attr()/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - CSS Funktion - - Layout - - Referenz - - Web -translation_of: Web/CSS/attr() ---- -

{{ CSSRef() }}

- -

Übersicht

- -

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

- -

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}

- -

Syntax

- -
Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
-
- -

Werte

- -
-
attribute-name
-
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.
-
<type-or-unit>
-
Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SchlüsselwortAssoziierter TypAnmerkungStandardwert
string{{cssxref("<string>")}}Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.An empty string
color {{ experimental_inline() }}{{cssxref("<color>")}}Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number {{ experimental_inline() }}{{cssxref("<number>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
-
-
<fallback>
-
Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.
-
- -

Beispiele

- -
p:before {
-  content:attr(data-foo) " ";
-}
-
- -
<p data-foo="Hallo">Welt</p>
-
- -

Ergebnis

- -

{{ EmbedLiveSample("Beispiele", '100%', '60') }}

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.
- -

Browser Kompatibilität

- -{{Compat("css.types.attr")}} diff --git a/files/de/web/css/attr/index.html b/files/de/web/css/attr/index.html new file mode 100644 index 0000000000..472e9e2794 --- /dev/null +++ b/files/de/web/css/attr/index.html @@ -0,0 +1,190 @@ +--- +title: attr +slug: Web/CSS/attr +tags: + - CSS + - CSS Funktion + - Layout + - Referenz + - Web +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

+ +

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}

+ +

Syntax

+ +
Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Werte

+ +
+
attribute-name
+
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.
+
<type-or-unit>
+
Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SchlüsselwortAssoziierter TypAnmerkungStandardwert
string{{cssxref("<string>")}}Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.An empty string
color {{ experimental_inline() }}{{cssxref("<color>")}}Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number {{ experimental_inline() }}{{cssxref("<number>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
+
+
<fallback>
+
Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.
+
+ +

Beispiele

+ +
p:before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="Hallo">Welt</p>
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample("Beispiele", '100%', '60') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.
+ +

Browser Kompatibilität

+ +{{Compat("css.types.attr")}} diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html deleted file mode 100644 index f8424ee032..0000000000 --- a/files/de/web/css/calc()/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -tags: - - CSS - - CSS Funktion - - Referenz -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

Übersicht

- -

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

- -

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

- -

Syntax

- -{{csssyntax}} - -
/* Eigenschaft: calc(Ausdruck) */
-width: calc(100% - 80px);
- -

Werte

- -
-
Ausdruck
-
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
-
- -

Ausdrücke

- -

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

- -
-
+
-
Addition.
-
-
-
Subtraktion.
-
*
-
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
-
/
-
Division (Divisor muss eine {{cssxref("<number>")}} sein).
-
- -

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
- Das Setzen von Klammern ist ebenfalls möglich.

- -

calc()-Funktionen können ineinander verschachtelt werden.

- -
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
-Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
- -
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
- -

Beispiele

- -

Relative Größe eines Objekts mit einer absoluten Positionierung

- -

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

- -

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

- -

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

- -
.banner {
-  position: absolute;
-  left: 40px;
-  width: 90%;               /* fallback for browsers without support for calc() */
-  width: calc(100% - 80px);
-}
-
- -
<div class="banner">This is a banner!</div>
- -

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
- -

Browserkompatibilität

- -

{{Compat("css.types.calc")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/calc/index.html b/files/de/web/css/calc/index.html new file mode 100644 index 0000000000..0b54fba886 --- /dev/null +++ b/files/de/web/css/calc/index.html @@ -0,0 +1,107 @@ +--- +title: calc +slug: Web/CSS/calc +tags: + - CSS + - CSS Funktion + - Referenz +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

+ +

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

+ +

Syntax

+ +{{csssyntax}} + +
/* Eigenschaft: calc(Ausdruck) */
+width: calc(100% - 80px);
+ +

Werte

+ +
+
Ausdruck
+
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
+
+ +

Ausdrücke

+ +

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+ +
+
+
+
Addition.
+
-
+
Subtraktion.
+
*
+
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
+
/
+
Division (Divisor muss eine {{cssxref("<number>")}} sein).
+
+ +

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
+ Das Setzen von Klammern ist ebenfalls möglich.

+ +

calc()-Funktionen können ineinander verschachtelt werden.

+ +
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
+Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
+ +
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
+ +

Beispiele

+ +

Relative Größe eines Objekts mit einer absoluten Positionierung

+ +

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

+ +

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

+ +

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* fallback for browsers without support for calc() */
+  width: calc(100% - 80px);
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
+ +

Browserkompatibilität

+ +

{{Compat("css.types.calc")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translate3d()/index.html b/files/de/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index 4798b754a8..0000000000 --- a/files/de/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS Funktion - - CSS Transformation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translate3d() ---- -
{{CSSRef}}
- -

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

- -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
- - - -

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

- -

Syntax

- -
translate3d(tx, ty, tz)
-
- -

Werte

- -
-
tx
-
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
-
ty
-
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
-
tz
-
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
- Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
-
- - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
-

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

- 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
- -

Beispiele

- -

Verwendung einer einachsigen Verschiebung

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
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;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

- -

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translate3d(10px, 0, 100px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

Siehe auch

- - 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..8e232a1f6f --- /dev/null +++ b/files/de/web/css/transform-function/translate3d/index.html @@ -0,0 +1,146 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+ + + +

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

+ +

Syntax

+ +
translate3d(tx, ty, tz)
+
+ +

Werte

+ +
+
tx
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
+
ty
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
+
tz
+
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
+ Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

+ 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
+ +

Beispiele

+ +

Verwendung einer einachsigen Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
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;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

+ +

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translatey()/index.html b/files/de/web/css/transform-function/translatey()/index.html deleted file mode 100644 index 83a980b3d0..0000000000 --- a/files/de/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS Funktion - - CSS Transfomation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

- -

- -
-

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

-
- -

Syntax

- -
/* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
-
- -

Werte

- -
-
<length-percentage>
-
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.
-
- - - - - - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
-

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

- 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
- -

Formale Syntax

- -
translateY({{cssxref("<length-percentage>")}})
-
- -

Beispiel

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateY(10px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

See also

- - 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..099f7d2202 --- /dev/null +++ b/files/de/web/css/transform-function/translatey/index.html @@ -0,0 +1,122 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - CSS + - CSS Funktion + - CSS Transfomation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +

+ +
+

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

+
+ +

Syntax

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+
+ +

Werte

+ +
+
<length-percentage>
+
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.
+
+ + + + + + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

Formale Syntax

+ +
translateY({{cssxref("<length-percentage>")}})
+
+ +

Beispiel

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + diff --git a/files/de/web/css/transform-function/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html deleted file mode 100644 index 5a3f6876da..0000000000 --- a/files/de/web/css/transform-function/translatez()/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS Funktion - - CSS Transformation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translateZ() ---- -
{{CSSRef}}
- -

Die CSS-Funktion translateZ() 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.

- -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
- - - -

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.

- -

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

- -
-

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

-
- -

Syntax

- -
translateZ(tz)
-
- -

Werte

- -
-
tz
-
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.
-
- - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
- -

Beispiel

- -

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.

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
- -

CSS

- -
div {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  left: 100px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translateZ(200px);
-  background-color: pink;
-}
-
- -

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

- -

Dann verschiebt die Funktion translateZ() 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.

- -

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

- -

Ergebnis

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

Siehe auch

- - 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..6b19b25096 --- /dev/null +++ b/files/de/web/css/transform-function/translatez/index.html @@ -0,0 +1,127 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateZ() 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.

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

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.

+ +

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

+ +
+

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Werte

+ +
+
tz
+
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.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
+ +

Beispiel

+ +

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.

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

+ +

Dann verschiebt die Funktion translateZ() 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.

+ +

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/url()/index.html b/files/de/web/css/url()/index.html deleted file mode 100644 index 9137892300..0000000000 --- a/files/de/web/css/url()/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: -slug: Web/CSS/url() -tags: - - CSS - - Layout - - Referenz - - URI - - URL -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url -original_slug: Web/CSS/url ---- -
{{ CssRef() }}
- -

Der <url> CSS-Datentyp bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.

- -
-

URI oder URL? Es gibt einen Unterschied zwischen einem URI und einem URL. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den Speicherort einer Ressource. Ein URI kann entweder ein URL oder ein Name (URN) einer Ressource sein.

- -

In CSS1 die funktionale Notation url() beschrieb nur echte URLs. In CSS2.1 die Definition von url()  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass url() verwendet werden konnte, um ein <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet url() nur echte <url>s.

-
- -

Syntax

- -

Der <url> Datentyp wird mit der funktionalen Notation url() spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).

- -
<a_css_property>: url("http://mysite.example.com/mycursor.png")
-<a_css_property>: url('http://mysite.example.com/mycursor.png')
-<a_css_property>: url(http://mysite.example.com/mycursor.png)
-
- -
-

Hinweis: Steuerzeichen über 0x7e sind ab Firefox 15 in URLs ohne Anführungszeichen nicht erlaubt. Sieh {{Bug(752230)}} für mehr Details.

-
- -

Beispiele

- -
.topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
- -
ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}Keine wichtige Änderungen seit CSS2.1.
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}Keine wichtige Änderungen seit CSS1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Erste Definition.
- -

Browserkompatibilität

- -

 

- -

{{Compat("css.types.url")}}

- -

 

diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url/index.html new file mode 100644 index 0000000000..4b7cec57e4 --- /dev/null +++ b/files/de/web/css/url/index.html @@ -0,0 +1,84 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - Layout + - Referenz + - URI + - URL +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +original_slug: Web/CSS/url() +--- +
{{ CssRef() }}
+ +

Der <url> CSS-Datentyp bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.

+ +
+

URI oder URL? Es gibt einen Unterschied zwischen einem URI und einem URL. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den Speicherort einer Ressource. Ein URI kann entweder ein URL oder ein Name (URN) einer Ressource sein.

+ +

In CSS1 die funktionale Notation url() beschrieb nur echte URLs. In CSS2.1 die Definition von url()  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass url() verwendet werden konnte, um ein <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet url() nur echte <url>s.

+
+ +

Syntax

+ +

Der <url> Datentyp wird mit der funktionalen Notation url() spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).

+ +
<a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
+ +
+

Hinweis: Steuerzeichen über 0x7e sind ab Firefox 15 in URLs ohne Anführungszeichen nicht erlaubt. Sieh {{Bug(752230)}} für mehr Details.

+
+ +

Beispiele

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}Keine wichtige Änderungen seit CSS2.1.
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}Keine wichtige Änderungen seit CSS1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Erste Definition.
+ +

Browserkompatibilität

+ +

 

+ +

{{Compat("css.types.url")}}

+ +

 

-- cgit v1.2.3-54-g00ecf