From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/shape/index.html | 93 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 files/de/web/css/shape/index.html (limited to 'files/de/web/css/shape') diff --git a/files/de/web/css/shape/index.html b/files/de/web/css/shape/index.html new file mode 100644 index 0000000000..b186d495aa --- /dev/null +++ b/files/de/web/css/shape/index.html @@ -0,0 +1,93 @@ +--- +title: +slug: Web/CSS/shape +tags: + - CSS + - CSS Datentyp + - Layout + - Reference + - Référence(2) + - Web +translation_of: Web/CSS/shape +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Der <shape> CSS Datentyp beschreibt die genaue Form eines Bereichs. Dieser Bereich wird benutzt, um zu definieren, auf welchen Teil eines Elements Eigenschaften wie {{ Cssxref("clip") }} angewendet werden.

+ +

In der aktuellen Spezifikation kann ein <shape>, obwohl er entworfen wurde, um beliebige Formen zu beschreiben, ausschließlich einen rechteckigen Bereich repräsentieren, der durch die Funktion rect() definiert wird.

+ +

Die rect() Funktion

+ +

Die rect() Funktion erstellt einen Bereich in Form eines Rechtecks.

+ +

Syntax

+ +
rect(top, right, bottom, left)
+
+ +

Werte

+ +

rect.png

+ +
+
top
+
Ist eine {{cssxref("<length>")}}, die den Versatz der Oberkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.
+
+ +
+
right
+
Ist eine {{cssxref("<length>")}}, die den Versatz der rechten Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.
+
+ +
+
bottom
+
Ist eine {{cssxref("<length>")}}, die den Versatz der Unterkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.
+
+ +
+
left
+
Ist eine {{cssxref("<length>")}}, die den Versatz der linken Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.
+
+ +

Interpolation

+ +

Werte des <shape> Datentyps, welche Rechtecke darstellen, können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie über ihre top, right, bottom und left Komponenten interpoliert, wovon jede als reale Fließkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird bestimmt durch die Timing Funktion associated with the animation.

+ +

Beispiel

+ +
 img.clip04 {
+   clip: rect(10px, 20px, 20px, 10px);
+ }
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>') }}{{ Spec2('CSS2.1') }}Definiert durch die {{ cssxref("clip") }} Eigenschaft
+ +

Browser Kompatibilität

+ +{{Compat("css.types.shape")}} + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf