Building Dynamic Shadows for an Image Gallery with JavaScript and CSS
If you're looking for a way to get realistic shading effects on your web site with some JavaScript and CSS, you've come to the right place. This third part of a three-part series applies what you learned in the first two parts to adding dynamic shadows to a simple image gallery.
Building Dynamic Shadows for an Image Gallery with JavaScript and CSS - Review: key concepts for creating dynamic shadows (Page 2 of 4 )
In this case, before I start showing you how to incorporate some dynamic shadows into a group of existing images, I'm going to reintroduce the approach that I developed in the preceding article of the series. This will help you remember how a basic shading effect was attached to a single DIV.
Please take a look at the following sample (X)HTML file. It uses a combination of the DOM and some CSS styles to incorporate a neat shadow into a selected DIV. The corresponding code sample is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1>Example of shadowed DIV using JavaScript (fixed size)</h1>
<div id="maincontainer">
<div id="textcontainer">
<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>
</div>
</body>
</html>
As you can see, the above example illustrates how to incorporate a simple -- yet attractive -- shading effect into a given DIV. In this case, I defined a simple JavaScript function called "addShadow()," which is responsible for adding the shadow in question to a DIV, identified as "textcontainer."
This task is performed via the DOM, since the function absolutely positions the "shadow" DIV behind the selected element. In this way it achieves the visual effect without using an additional background image.
At this point, everything looks good; you've learned how to build lightweight shadows by using the DOM along with some basic CSS styles. Nevertheless, this educational journey hasn't finished yet. Now I'd like to show you how to use this technique in the context of a real-word situation. Therefore, in the following section I'll show you how to incorporate these dynamic shadows into a simple image gallery.
To learn how this will be done, please jump ahead and read the following lines.
JavaScript 
Using the DOM to Build Dynamic Shadows with JavaScript and CSS
