Do you like the three-dimensional effects that dynamic shadows can add to your web site? In this three-part series, you'll learn how to create this effect with JavaScript and CSS. This first part shows you how to implement some basic CSS approaches to build a few primitive shadowed web page elements.
Building Dynamic Shadows with JavaScript and CSS - Using CSS borders for shadowed web page elements (Page 3 of 4 )
As I mentioned in the section you just read, it's possible to build pretty realistic shadows by using the "border" CSS property. This property can be easily incorporated into any element of a web page, since it's generally well supported by most modern browsers.
This basic shadowing technique is based on specifying an "outset" value for the border style of the targeted web page element. The (X)HTML file below demonstrates a simple implementation of this technique, so take a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Example of shadowed DIV using the outset border property (fixed size)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
text-align: center;
margin: 0;
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
#container{
width: 350px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ccc;
border: 3px outset #fff;
}
</style>
</head>
<body>
<h1>Example of shadowed DIV using the outset border property</h1>
<div id="container">
<p>Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here. Content for DIV element goes here.</p>
</div>
</body>
</html>
In this particular case, the above (X)HTML file uses a few simple CSS styles to add a raw shadow to one DIV identified as "container," via the proper manipulation of its "border" property. This is only a simple approach for adding basic shadows to certain elements of a web document; it uses a target DIV whose respective height has been specified in pixels.
The final result of using this approach can be seen in the sample image below:
Not too bad, right? As you saw in the previous example, by tweaking the border style property of a selected DIV, it's feasible to incorporate a shadow effect, even though it looks pretty primitive. However, this CSS technique has been used with elements that have a fixed width, so in the section to come I'm going to explain how to add this shadow effect to DIVs that have liquid dimensions.
To see how this will be done, go ahead and read the next few lines. They're just one click away.
JavaScript 
Using the DOM to Build Dynamic Shadows with JavaScript and CSS
