text-shadow

Esta tradução está incompleta. Ajude atraduzir este artigo.

Sumário

A propriedade text-shadow acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao text-decorations do elemento.

Cada sombra é especificada como um deslocamento do texto, juntamente com valores opcionais de cor e raio de desfoque.

Multiplas sombras são aplicadas de frente-para-trás, com a primeira sombra especificada no topo.

Esta propriedade se aplica a ambos ::first-line e ::first-letter pseudo-elements.

Initial valuenone
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Midiavisual
Computed valuea color plus three absolute lengths
Animation typea shadow list
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

/* deslocamento-x | deslogamento-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;

Valores

<cor>
Optional. 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 consistencia entre os navegadores, especifique explicitamente uma cor.
<offset-x> <offset-y>
Required. These <length> values specify the shadow's offset from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, then the shadow is placed behind the text (and may generate a blur effect when <blur-radius> is set).
To find out what units you can use, see <length>.
<blur-radius>
Optional. This is a <length> value. If not specified, it defaults to 0. The higher this value, the bigger the blur; the shadow becomes wider and lighter.

Formal syntax

none | <shadow-t>#

where
<shadow-t> = [ <length>{2,3} && <color>? ]

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemplos

.red-text-shadow {
   text-shadow: red 0 -2px;
}
<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>

.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;
}
<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>

.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;
}
<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>

Especificações

Specification Status Comment
CSS Transitions
The definition of 'text-shadow' in that specification.
Working Draft Lists text-shadow as animatable.
CSS Text Decoration Level 3
The definition of 'text-shadow' in that specification.
Candidate Recommendation The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec improved and precised the syntax. Later it was moved to new working draft CSS Text Decoration Module Level 3.

Compatibilidade do navegador

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0.158.0 3.5 (1.9.1) [1] 10 [3] 9.5 [2] 1.1 (100) [4]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

[1] Gecko (Firefox) theoretically supports infinite text-shadows (don't try it). Gecko 2 and later cap the blur radius at 300 for performance reasons. If the <color> value is unspecified, then Gecko uses the value of the element's color property.

[2] Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom).

[3] Internet Explorer 5.5 supports Microsoft's Shadow and DropShadow Filter.

[4] Safari: Any shadows that do not explicitly specify a color are transparent. Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows. Konqueror supports text-shadow starting with version 3.4.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: luis.kaufmann.silva, Sebastianz, philippesilva
 Última atualização por: luis.kaufmann.silva,