Adding a Text Drop Shadow

The drop shadow is a time-honored method for adding depth and texture to two-dimensional designs. Apple's Safari browser has included the text-shadow property, which is part of CSS3 (Table 4.5), allowing you to define the color, offset (x and y), and blur for a drop shadow behind any text. Although this will not work in any browser except Safari, it will not interfere with other browsers either.

Table 4.5. Text-Shadow Values




S1.1, CSS3


S1.1, CSS3


S1.1, CSS3


S1.1, CSS3

In this example (Figure 4.5), the level 1 heading has a nice reddish glow behind it, while other text has different drop shadows to make them stand out.

Figure 4.5. The title has a reddish glow beneath it, while the author's name and chapter number have a drop shadow.

To define the text shadow:



Type the text-shadow property name, followed by a colon (:), in the CSS definition list (Code 4.5).

Code 4.5. The drop-shadow property allows you to set the x,y offset and the blur radius.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " DTD /xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Adding a Text Drop Shadow</title> <style type="text/css" media="screen"> <!-- body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif;      text-shadow: none; } h1 {      text-shadow:#f66 10px 12px 6px; } h2 {      text-shadow:#999 3px 4px 2px; } .chapterTitle {      text-shadow:none; } .author {      text-shadow:#333 0px 2px 3px; } a:hover {      text-shadow: #999 2px 2px 2px; } --> </style> </head> <body> <div >      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <h2>CHAPTER V<br />         <span >Advice from a Caterpillar</span></h2> </div> <p>The Caterpillar and Alice looked at each      other for some time in silence:at last      the Caterpillar took the hookah out of      its mouth, and addressed her in a      languid, sleepy voice.</p> </body> </html>



Type a space and then a color value for the shadow. See "Values and Units Used in this Book" in the Introduction for more detail on color values.


10px 12px

Type a space and then two positive or negative length values separated by a space. The first value is the vertical distance to offset the shadow (positive is down; negative is up). The second value is the horizontal offset (positive is right; negative is left).



Type a space and then a positive length value for the amount of blur to apply to the shadow.


  • Keep in mind that although this is a "shadow" you can use any color for the shadow. Thus, if your text is on a dark background, you could use a light color to create a drop "glow" instead.

  • Although this example uses several different shadow strengths, colors, and offsets, if you want to make the shadows look natural, their offsets should all be proportional to each other.

  • The W3C is also suggesting the inclusion of a box-shadow property in CSS3 that works a lot like the text-shadow property, but would be applied to the elements box. This property is not implemented in any browser currently.

  • Text shadows are great way to have links pop-off the page when used with the :hover pseudo class.

  • The text-shadow property actually allows for multiple shadows on a single element. A comma separates each value list. However, Safari does not support this feature.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: