Compartilhar via

Text shadows

  • Artigo

Internet Explorer 10 and Windows apps using JavaScript support drop shadows on text using the Cascading Style Sheets, Level 3 (CSS3) text-shadow property.

The text-shadow property

The text-shadow property applies a drop shadow effect to the specified text, and is defined in the World Wide Web Consortium (W3C) CSS Text Decoration Module Level 3. If you are familiar with the syntax for the box-shadow property, you already know the syntax for text-shadow; they are almost identical.

Property Description

text-shadow

A comma-separated list of shadows that attaches one or more drop shadows to the specified text. Each shadow is made up of a space-delimited list of the following:

  • horizontal offset  Required. A positive value draws a shadow that is offset to the right of the text, a negative length to the left.
  • vertical offset  Required. A positive value draws a shadow that is offset below the text, a negative one above.
  • blur distance  Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
  • spread distance  Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. (Be aware that this value may not be supported by all browsers.)
  • color  Any of the supported Cascading Style Sheets (CSS) color values.

 

The syntax for the text-shadow property is identical to the syntax for the box-shadow property, except that the text-shadow property does not recognize the inset keyword.

The following example applies a dark gray shadow with a small blur value slightly to the right and under the specified text:

.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

This results in the following when the selector is applied to a short text block:

The W3C has a page full of text-shadow tips and examples: CSS text shadows.

API Reference

text-shadow

Samples and tutorials

CSS Text-shadow sample

How to add fun text effects using CSS

Internet Explorer Test Drive demos

Hands On: Text-shadow

IEBlog posts

Moving to Standards-based Web Graphics in IE10

CSS3 text-shadow in IE10

Specification

CSS Text Decoration Module Level 3: Section 4

Backgrounds and borders

Mastering CSS3: 7 cool text-shadow samples you can’t miss

Mastering CSS3: Text Shadows