Building Dynamic Shadows with JavaScript and CSS - Dropping shadows with CSS: building simple background images
(Page 2 of 4 )
A good place to start demonstrating how to add a basic shadow to a given web page element consists of creating a shadowed background image with any graphic editing software and including it in the selected element by way of CSS.
Indeed, this approach may be the simplest one; it can be implemented by coding only one basic (X)HTML file, like the one show below:
<!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 one background image</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;
height: 300px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fff url(shadow.gif) center center no-repeat;
}
</style>
</head>
<body>
<h1>Example of shadowed DIV using one background image</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>
As demonstrated above, the previous sample (X)HTML file is composed of an <h1> header and a simple DIV, which has been identified as "container." So far, this isn't rocket science. However, if you take a close look at the CSS styles declared within the <head> section of the file in question, you'll see that a "shadow.gif" image has been specified as the background picture of the aforementioned DIV.
Naturally, this image is responsible for creating the shading effect in the containing DIV. It looks like this:
It's quite probable that you may want to see the final appearance of this DIV, after styling it with the previous background image, so here it is:
Obviously, as I said before, using a background image to build some shadowed web page elements may be the easiest approach to creating this kind of visual effect. Unfortunately, this technique is fairly impractical and inefficient. Its first down side rests on its dependence on employing heavy graphics to create the shadow; the second disadvantage is that it can be used only with DIVs that have fixed heights, which is rather unusual in real-world conditions.
As you can see, the previous approach can be used only in specific cases, meaning that's necessary to look at other techniques that allow you to work with liquid DIVs. Therefore, in the upcoming section I'm going to show you how to build some basic shadows without having to appeal to heavy-weighted background images.
Click on the link that appears below and keep reading.
Next: Using CSS borders for shadowed web page elements >>
More JavaScript Articles
More By Alejandro Gervasio
