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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
---
title: text-shadow
slug: Web/CSS/text-shadow
translation_of: Web/CSS/text-shadow
---
<div>{{ Cssref }}</div>
<h2 id="Summary" name="Summary">Sumário</h2>
<p>A propriedade <code>text-shadow</code> acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao {{ cssxref("text-decoration","text-decorations") }} do elemento.</p>
<p>Cada sombra é especificada como um deslocamento do texto, juntamente com valores opcionais de cor e raio de desfoque.</p>
<p>Multiplas sombras são aplicadas de frente-para-trás, com a primeira sombra especificada no topo.</p>
<p>Esta propriedade se aplica a ambos {{cssxref("::first-line")}} e {{cssxref("::first-letter")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="brush: css">/* deslocamento-x | deslocamento-y | raio-de-desfoque | cor */
text-shadow: 1px 1px 2px black;
/* cor | deslocamento-x | deslocamento-y | raio-de-desfoque */
text-shadow: #CCC 1px 0 10px;
/* deslocamento-x | deslogamento-y | cor */
text-shadow: 5px 5px #558ABB;
/* cor | deslocamento-x | deslocamento-y */
text-shadow: white 2px 5px;
/* deslocamento-x | deslocamento-y
/* Usa o padrão para cor e raio-de-desfoque */
text-shadow: 5px 10px;
/* Valores globais */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
</pre>
<h3 id="Values" name="Values">Valores</h3>
<dl>
<dt><cor></dt>
<dd>Opcional. Pode ser especificado tanto antes quanto depois dos valores de deslocamento. Se a cor não é especificada, uma cor UA-chosen será usada. {{ note("Se voce quer garantir a consistência entre os navegadores, especifique explicitamente uma cor.") }}</dd>
<dt><offset-x> <offset-y></dt>
<dd>Obrigatório. These <code><length></code> values specify the shadow's offset from the text. <code><offset-x></code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code><offset-y></code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, then the shadow is placed behind the text (and may generate a blur effect when <code><blur-radius></code> is set).<br>
To find out what units you can use, see {{ cssxref("<length>") }}.</dd>
<dt><blur-radius></dt>
<dd>Opcional. This is a {{ cssxref("<length>") }} value. If not specified, it defaults to <code>0</code>. The higher this value, the bigger the blur; the shadow becomes wider and lighter.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">Exemplos</h2>
<div id="Example1">
<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('Example1', '689px', '90px')}}</p>
<div id="Example2">
<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('Example2', '689px', '180px')}}</p>
<div id="Example3">
<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('Example3', '689px', '90px')}}</p>
<p><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Especificações</strong></p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Lists <code>text-shadow</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow') }}</td>
<td>{{ Spec2('CSS3 Text Decoration') }}</td>
<td>The CSS property <code>text-shadow</code> was <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The<em> CSS Text Module Level 3 </em>spec improved and precised the syntax. Later it was moved to new working draft <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/" title="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em>.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.0.158.0</td>
<td>{{ CompatGeckoDesktop("1.9.1") }} [1]</td>
<td>10 [3]</td>
<td>9.5 [2]</td>
<td>1.1 (100) [4]</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown }}</td>
<td>{{ CompatUnknown }}</td>
<td>{{ CompatUnknown }}</td>
<td>{{ CompatUnknown }}</td>
<td>{{ CompatUnknown }}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <strong>Gecko</strong> (Firefox) theoretically supports infinite text-shadows (don't try it). <strong>Gecko 2</strong> and later cap the blur radius at 300 for performance reasons. If the <color> value is unspecified, then <strong>Gecko</strong> uses the value of the element's {{ cssxref("color") }} property.</p>
<p>[2] <strong>Opera</strong> supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. <strong>Opera 9.5-10.1</strong> adheres to the old, reverse painting order (CSS2, the first specified shadow is on the <em>bottom</em>).</p>
<p>[3] <strong>Internet Explorer 5.5</strong> supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><em>Shadow</em> and <em>DropShadow</em> Filter</a>.</p>
<p>[4] <strong>Safari: </strong>Any shadows that do not explicitly specify a color are transparent. <strong>Safari 1.1-3.2</strong> only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). <strong>Safari 4.0</strong> (WebKit 528) and later support multiple text-shadows. <strong>Konqueror</strong> supports text-shadow starting with version 3.4.</p>
<h2 id="See_also" name="See_also">Veja também</h2>
<ul>
<li>{{ cssxref("box-shadow") }}</li>
</ul>
|
