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/text-shadow/index.html | 145 ++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 files/de/web/css/text-shadow/index.html (limited to 'files/de/web/css/text-shadow') diff --git a/files/de/web/css/text-shadow/index.html b/files/de/web/css/text-shadow/index.html new file mode 100644 index 0000000000..89b3f6907e --- /dev/null +++ b/files/de/web/css/text-shadow/index.html @@ -0,0 +1,145 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - CSS Text + - Eigenschaft + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-shadow +--- +
{{Cssref}}
+ +

Übersicht

+ +

Die text-shadow CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und {{cssxref("text-decoration","Textdekorationen")}} des Elements angewendet werden sollen.

+ +

Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.

+ +

Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.

+ +

Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} Pseudoelemente.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y */
+/* Für color und blur-radius werden Standardwerte verwendet */
+text-shadow: 5px 10px;
+
+/* Globale Werte */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+
+ +

Werte

+ +
+
<color>
+
Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet. {{note("Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.")}}
+
<offset-x> <offset-y>
+
Benötigt. Diese <length> Werte bestimmen den Versatz des Schattens vom Text. <offset-x> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <offset-y> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte 0 sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <blur-radius> gesetzt ist).
+ Siehe {{cssxref("<length>")}} für mögliche Einheiten.
+
<blur-radius>
+
Optional. Dies ist ein {{cssxref("<length>")}} Wert. Falls nicht angegeben, ist der Standardwert 0. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}
+ +
<p class="red-text-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Beispiel1', '689px', '90px')}}

+ +
+
.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}
+ +
<p class="white-with-blue-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Beispiel2', '689px', '180px')}}

+ +
+
.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}
+ +
<p class="gold-on-gold">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Beispiel3', '689px', '90px')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Definiert text-shadow als animierbar.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}Die CSS Eigenschaft text-shadow wurde in CSS2 inkorrekt definiert und in CSS2 (Level 1) verworfen. Die CSS Text Module Level 3 Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf CSS Text Decoration Module Level 3 verschoben.
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.text-shadow")}}

+ +

Siehe auch

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