Building Dynamic Shadows with JavaScript and CSS

Introduction

Over the last few years, the steady trend to mess up JavaScript code with structural markup of web pages has thankfully changed. Consequently, more and more conscientious web developers use client-side scripting only in cases where it's necessary to extend (not replace) the behavior of a server-side web application.

As you'll possibly know, this approach has proven to be efficient when developing web applications whose respective structural, presentational and behavioral modules reside on well-differentiated layers, which also make these applications more robust and easier to maintain.

And certainly, the implementation of this multi-layered web development model is also applicable when JavaScript is used to create some visual effects that can be applied to certain elements of a web document.

Definitely, there is a difference between attaching, for instance, some dynamic tool tips to a predefined number of DIVs included in a web page by mixing ugly inline event handlers with (X)HTML markup, merged in one monolithic file, and implementing the same effect by putting these two elements in different files. You spot the difference between these two approaches, right?

However, one of the best advantages to using unobtrusive JavaScript code to extend the behavior of one or more elements of a web page is that a vast range of dynamic visual effects can be applied to them easily, without having to modify a single tag of the structural markup.

To be frank, this concept can be applied with minor problems when it comes to adding dynamic shadows to determined elements included in a web document. Undoubtedly, the utilization of shadows can be quite useful for building realistic components that are used very often in the creation of web-based user interfaces. These components include buttons and drop-down menus, but the effect can be easily applied to other elements, like images or even entire web page backgrounds, in order to make them look more appealing.

In summary, dynamic shadows can punch up the look and feel of certain sections of a web page. If you want to learn some straightforward techniques to include this popular visual effect in your own web sites, keep reading. In this series of articles I'll provide you with a bunch of code samples, aimed at demonstrating how to incorporate pretty realistic shadows into any element of a web document. I'll use both JavaScript and CSS, and more specifically, some methods provided by the DOM (Document Object Model).

So, are you ready to learn how to build shadows via client-side scripting? Don't waste more time; start reading now!