I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS text-shadow

css / shadows

Estimated reading time: 2 minutes, 12 seconds

A CSS3 feature, text-shadow can be applied to any text element, but should not, as a general rule, be applied to paragraphs; the property is best left to major headings and navigation bars.

We will explore the syntax, an example, and some common mistakes; for a full-blown and unusual use of the property, you may wish to read Horizontal Reverse-Focus Navigation With CSS3.

text-shadow is fully supported in all modern browsers, with no requirement for vendor prefixes. The property is supported in IE10, but not previous versions.

The basic syntax is very straightforward:

text-shadow: horizontal offset vertical offset blur color;

An example would be the following CSS:

h1 { color: black; text-shadow: 0 4px 2px rgba(0, 0, 0, 0.3); text-align: centre; letter-spacing: .1em; text-align: centre; font-family: Highway, sans-serif; background: #fffdff; width: 10em; padding: .5em; border: 5px double #222; background-image: url('assets/images/excelsior-logo.jpg'); background-repeat: no-repeat; background-position: centre; }
h1 span { text-transform: uppercase; display: block; font-size: .8em; }

Applied to this markup:

<h1> ExcelsioR <span>Corporation</span></h1>

A few points to note:

  • A shadow is never solid black unless you are on stage or the surface of the moon: in the real world, ambient light, as well as that reflected from other sources, will cause a shadow to be somewhat transparent. Most neophyte designers make their drop-shadows far too solid and thick; in reality, a drop-shadow is usually subtle, with a transparency of 30% or so. rgba or hsla works particularly well for this, as shadow colors based on these color models will adapt to changes in background colors.

  • Similarly, shadows almost never have perfectly crisp edges. Adding a few pixels of blur will make the shadows far more realistic.

  • Because we are typically using very small values, blur and offset are usually specified in pixels, although other CSS measurement systems are supported.

  • Lightweight fonts will cast thin shadows. A letter casting a shadow bigger than the original font-size (i.e. by adding a great deal of blur to the shadow) implies that the projected light source is very close to the letter-form, which is not realistic in most cases. Increasing the weight and / or thickness of the font is usually a better route to take. Extra-black and gothic letter forms typically work particularly well.

  • Living on the planet Earth as most of us do, we expect our most common light source (the Sun) to be above us, and projected shadows to be down. You can give negative values to the vertical offset of text-shadow, but doing so tends to produce the flashlight-held-under-the-chin-effect of spooky camp trips.

  • It is possible to supply multiple text-shadows to an element (demonstrated in the aforementioned Horizontal Reverse-Focus Navigation With CSS3 article) but it is usually not recommended.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.