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:
- The color of the text-shadow (using the 6-digit hex, 3-digit hex, color name, or RGB method)
- The X-coordinate of the text-shadow, relative to the text (distance towards the right)
- The Y-coordinate of the text-shadow, relative to the text (distance downwards)
- 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:
Want to learn more great Cascading Style Sheets tips? Come take one of our CSS classes:
- Web Basics 2: Beyond the Basics of Markup for Structuring Web Content on April 21
- CSS1: Styling Your Site with Cascading Style Sheets on May 18
- CSS2: Using Cascading Style Sheets for Page Layout on June 17
For more information about Tech Training and our classes, visit http://techtraining.stanford.edu/.
Tags: cascading style sheets, css
