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
194
195
196
197
|
---
title: text-shadow
slug: Web/CSS/text-shadow
tags:
- Propiedad CSS
- Texto CSS
translation_of: Web/CSS/text-shadow
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad <strong><code>text-shadow</code></strong> agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad {{cssxref("text-decoration","text-decorations")}} del elemento.</p>
<p>Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.</p>
<p>Múltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.</p>
<p>Esta propiedad aplica para los <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a> {{cssxref("::first-line")}} y {{cssxref("::first-letter")}}.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</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
/* Se usan los valores predeterminados para color y blur-radius */
text-shadow: 5px 10px;
/* Valores globales */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><color></dt>
<dd>Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario. {{note("Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.")}}</dd>
<dt><offset-x> <offset-y></dt>
<dd>Requeridos. Estos valores <code>length</code> especifican el ófset de la sombra del texto. <code><offset-x></code> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <code><offset-y></code> especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son <code>0</code>, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor <code><blur-radius></code>).<br>
Para más detalles de las unidades que se pueden usar, véase {{cssxref("length")}}.</dd>
<dt><blur-radius></dt>
<dd>Opcional. Éste es un valor {{cssxref("length")}}. Si no se especifica, su valor predeterminado es <code>0</code>. Mientras más alto sea el valor, mayor será la difuminación; la sombra se vuelve más amplia y clara.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</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>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Incluye <code>text-shadow</code> en la lista de propiedades que pueden ser animadas.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>La propiedad CSS <code>text-shadow</code> fue <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">inadecuadamente definida en CSS2</a> y descartada en CSS2 (Nivel 1). La especificación del Módulo de Textos Nivel 3 de CSS mejoró y clarificó la sintaxis. Más adelante fue movido al nuevo borrador de trabajo del <a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">Módulo de Textos Nivel 3 de CSS</a>.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>2.0</td>
<td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
<td>10<sup>[3]</sup></td>
<td>9.5<sup>[2]</sup></td>
<td>1.1 (100)<sup>[4]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Gecko teóricamente soporta sombras de texto infinitas (no lo intente). Gecko 2 {{geckoRelease("2.0")}} y superiores limitan el radio de difuminación a 300 por razones de rendimiento. Si el valor <color> no es especificado, Gecko usará el valor de la propiedad {{cssxref("color")}} del elemento.</p>
<p>[2] Opera soporta un máximo de 6-9 sombras de texto por motivos de rendimiento. El radio de difuminación está limitado a 100px. Opera 9.5 a 10.1 utiliza el antiguo orden en reversa de dibujado (CSS2, la primera sombra en aplicar es la última que se define).</p>
<p>[3] Internet Explorer 5.5 soporta la propiedad <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><code>Shadow</code> and <code>DropShadow</code> Filter</a> de Microsoft.</p>
<p>[4] En Safari, cualquier sombra que no especifique explícitamente un color es transparente. Safari 1.1 a 3.2 sólo soportan una sombra de texto (muestra la primera definida en la propiedad e ignora al resto). Safari 4.0 (WebKit 528) y superiores soportan múltiples sombras de texto.<br>
Konqueror soporta sombras de texto desde la versión 3.4.</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li>{{cssxref("box-shadow")}}</li>
</ul>
|
