CSS3 box-shadow property: use CSS to liven up your web images!

Shadow effects have always been very cool. What started out as Photoshop junkies attaching them to background images is now in the domain of any programmer, thanks to CSS!. The CSS3 box-shadow property allows designers and developers to easily implement drop shadows on any boxed elements. You can specify values for size, color, offset, and blur.

By casting a drop shadow from a image, you can add dimension without the need to create specialized web images. Let’s explore how to create a basic outer shadow, and then dive into a neat trick on defining a deep shadow that can really liven up a flat web image.

Start with an image:

The first thing you will need is an image without any borders, as we will be applying our own border using CSS. Wrap the image within a <div> element, which we will later apply our style classes against.

<div> <img src="orlando-florida.jpg" alt="aDesign" /></div>

Create the border:

First we create a basic box shadow class. This class will provide a nice outline around the image, and begins to give us the three dimensional look we are after. You can adjust the size of the shadow border around the image by adding additional pixels to the box-shadow element properties.

Next we create a deep shadow class for our image. This enhanced shadow will give us the deep three dimensional look we are after. We do this by creating a separate CSS class and applying it to our image <div> element. Yes, the shadow is over the image, but we will correct the CSS in the next step.

Finally, we change the z-order of the deep shadow CSS class, to position it behind our original image. This completes the look we are after. As you can see, we have given our original flat image a three dimensional look and feel, by simply applying CSS classes to the <div> element containing our original image.

very nice Bob. It would be even cooler if css can figure out the
shape of your gif and create the corresponding shadow. Right now we
have to create our own shadow shape to match the shape of the box
from which you want to cast a shadow.

@ Peter - thanks for the feedback! While I'm not aware of any means
for CSS to dynamically retrieve the size of the image.. what it
could do is set the size of the image, which comes functionally
close to what your describing.

Bob, this is better CSS3 than an example I saw just yesterday.
There they just had the -moz- and -webkit- variants of the
properties, not the unadorned one. Unless we really DON'T know what
the standard name will be this seems good practice.