aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/text-shadow
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/text-shadow
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/css/text-shadow')
-rw-r--r--files/es/web/css/text-shadow/index.html197
1 files changed, 197 insertions, 0 deletions
diff --git a/files/es/web/css/text-shadow/index.html b/files/es/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..1e0cd7ee53
--- /dev/null
+++ b/files/es/web/css/text-shadow/index.html
@@ -0,0 +1,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>&lt;color&gt;</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>&lt;offset-x&gt; &lt;offset-y&gt;</dt>
+ <dd>Requeridos. Estos valores <code>length</code> especifican el ófset de la sombra del texto. <code>&lt;offset-x&gt;</code> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <code>&lt;offset-y&gt;</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>&lt;blur-radius&gt;</code>).<br>
+ Para más detalles de las unidades que se pueden usar, véase {{cssxref("length")}}.</dd>
+ <dt>&lt;blur-radius&gt;</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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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">&lt;p class="red-text-shadow"&gt;
+ 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.
+&lt;/p&gt;</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">&lt;p class="white-with-blue-shadow"&gt;
+ 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.
+&lt;/p&gt;</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">&lt;p class="gold-on-gold"&gt;
+ 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.
+&lt;/p&gt;</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 &lt;color&gt; 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>