Techie Tip of the Week – CSS: Adding Drop Shadows to Text

Want to add a drop shadow effect on your web content? Using Cascading Style Sheets, it’s a breeze!

To add a drop shadow effect, the CSS declaration is:

text-shadow

To define the text-shadow, you must define four values:

  1. The color of the text-shadow (using the 6-digit hex, 3-digit hex, color name, or RGB method)
  2. The X-coordinate of the text-shadow, relative to the text (distance towards the right)
  3. The Y-coordinate of the text-shadow, relative to the text (distance downwards)
  4. The blur radius (amount of blurriness) of the text-shadow.

For example, suppose you write the following CSS (highlighted in yellow) and HTML code:

<!DOCTYPE HTML>
<html>
<head>
<title>Stanford Widget Department</title>
<style type="text/css">
 h1 {text-shadow: #820000 5px 3px 5px;} 
</style>
</head>
<body>
 <h1>Stanford University Department of Widgets</h1>
</body>
</html>

This would be the result:

Stanford University Department of Widgets (black font with a cardinal red drop shadow)

Want to learn more great Cascading Style Sheets tips? Come take one of our CSS classes:

For more information about Tech Training and our classes, visit http://techtraining.stanford.edu/.

Tags: ,

Leave a Reply

You must be logged in to post a comment.