Building Dynamic Shadows for an Image Gallery with JavaScript and CSS

If you're a web developer who frequently builds JavaScript applications, then you know that it can be truly useful for extending the behavior of server-side programs.

This series of articles applies this concept from a practical point of view. It uses copious code samples to show you how to use the functionality of client-side scripting along with some CSS styles to incorporate pretty realistic shadows into selected elements of a web document.

And speaking of realistic shadows, you'll probably recall that during the previous tutorial of this series, I demonstrated how to build them very easily by using some DOM scripting and CSS, in this way adding a quite attractive shading effect to a selected DIV.

As you learned in that particular article, this technique consists of creating via the DOM a gray-colored DIV (the shadow), and then positioning it absolutely behind a targeted DIV. Of course, the end result of this overlapping process is an appealing shading effect, achieved with minor trouble.

In addition, it's worth mentioning here that this DOM-based technique not only uses unobtrusive JavaScript to build the shadows, but it's capable of degrading gracefully when scripting has been disabled on the browser.

Hopefully you're now very familiar with building dynamic shadows using the DOM and CSS, but if you're anything like me, then you may want to see how these shadows can be utilized in a real-world example. Thus, in this final chapter of the series I'm going to show you how to incorporate them into graphics that belong to an existing image gallery. Sounds pretty interesting, right?

Well, now that you've been introduced to the subject of this article, it's time to learn how to add dynamic shadows to a simple image galley. Let's jump in!