Using the DOM to Build Dynamic Shadows with JavaScript and CSS - Reviewing some previous shadowing techniques
(Page 2 of 4 )
Before I show you how to use the assistance of JavaScript and CSS to build some pretty realistic shadows in selected elements of a given web document, I’d like to list the code samples developed in the first article of the series.
By doing this, you’ll be able to evaluate the pros and cons of the aforementioned techniques against the DOM-based approach that I plan to implement later on.
Having said that, here are all the practical examples that you learned in the prior tutorial, accompanied by their corresponding screen shots:
<!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>
<!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>
<!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 (liquid 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: 30%;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ccc;
border: 2px outset #fff;
}
</style>
</head>
<body>
<h1>Example of shadowed DIV using the outset border property (liquid size)</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 you’ll surely recall, the first hands-on example implements a quick and dirty approach to incorporating a basic shadow into a given DIV. In this case, the technique is based on including a shadowed background image into the element in question, thus achieving the visual effect.
With reference to the other two examples, they merely tweak the “border-style” property of a couple of DIVs to drop a shadow, using both fixed and liquid dimensions. Logically, all of the previous examples are extremely simple to grasp, so you shouldn’t have major problems understanding how they function.
So far, so good. Now that you hopefully recalled how all of these CSS approaches were implemented to include basic shadows in a web document, it’s time to see how to use a combination of DOM scripting and a few CSS styles to create more efficient and realistic dynamic shadowing effects.
Naturally, to see how this DOM-driven technique will be developed, you’ll have to click on the link below and keep reading.
Next: Creating dynamic shadows with the DOM >>
More JavaScript Articles
More By Alejandro Gervasio
