diff options
Diffstat (limited to 'files/pt-br/web/css/text-shadow/index.html')
| -rw-r--r-- | files/pt-br/web/css/text-shadow/index.html | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/files/pt-br/web/css/text-shadow/index.html b/files/pt-br/web/css/text-shadow/index.html new file mode 100644 index 0000000000..6f22e7e329 --- /dev/null +++ b/files/pt-br/web/css/text-shadow/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |