1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: text-shadow
slug: Web/CSS/text-shadow
tags:
- CSS
- CSS Text
- Eigenschaft
- NeedsMobileBrowserCompatibility
- Referenz
translation_of: Web/CSS/text-shadow
---
<div>{{Cssref}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <strong><code>text-shadow</code></strong> 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.</p>
<p>Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.</p>
<p>Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.</p>
<p>Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css">/* 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;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><color></dt>
<dd>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.")}}</dd>
<dt><offset-x> <offset-y></dt>
<dd>Benötigt. Diese <code><length></code> Werte bestimmen den Versatz des Schattens vom Text. <code><offset-x></code> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <code><offset-y></code> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <code><blur-radius></code> gesetzt ist).<br>
Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd>
<dt><blur-radius></dt>
<dd>Optional. Dies ist ein {{cssxref("<length>")}} Wert. Falls nicht angegeben, ist der Standardwert <code>0</code>. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<div id="Beispiel1">
<pre class="brush: css">.red-text-shadow {
text-shadow: red 0 -2px;
}</pre>
<pre class="brush: html"><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></pre>
</div>
<p>{{EmbedLiveSample('Beispiel1', '689px', '90px')}}</p>
<div id="Beispiel2">
<pre class="brush:css">.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;
}</pre>
<pre class="brush: html"><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></pre>
</div>
<p>{{EmbedLiveSample('Beispiel2', '689px', '180px')}}</p>
<div id="Beispiel3">
<pre class="brush:css">.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;
}</pre>
<pre class="brush: html"><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></pre>
</div>
<p>{{EmbedLiveSample('Beispiel3', '689px', '90px')}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Definiert <code>text-shadow</code> als animierbar.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>Die CSS Eigenschaft <code>text-shadow</code> wurde <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">in CSS2 inkorrekt definiert</a> und in CSS2 (Level 1) verworfen. Die <em>CSS Text Module Level 3</em> Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em> verschoben.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{Compat("css.properties.text-shadow")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{cssxref("box-shadow")}}</li>
</ul>
|
