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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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.
Next: Building shadowed elements with liquid dimensions >>
More JavaScript Articles
More By Alejandro Gervasio
