CSS3 box-shadow and image hover effects

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari (and Google Chrome), using the proprietary -moz- and -webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is notabsolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers.

Box-shadow basics

First, a quick introduction and explanation. The box-shadow property takes several attributes/values, like any other CSS property, and these are are specified in order as follows:

• Horizontal offset of the shadow: a positive value for shadows on the right of the box, and a negative value for a shadow on the left of the box
• Vertical offset: similarly, a negative value means the shadow will be on top, a positive one means the shadow will be below the box
• The blur radius: a value of 0 makes the shadow sharp, the higher the number, the more blurred.
• Color: no need to explain this one ;-)

Just to explain, here’s a style sheet rule that will give a 1px border and a grey drop shadow of 5px to right and bottom of an element. The shadow has no blur in this instance.

.dropshadowclass {
        border: solid 1px #CCC;
 -moz-box-shadow: 5px 5px 0px #999;
 -webkit-box-shadow: 5px 5px 0px #999;
        box-shadow: 5px 5px 0px #999;
        }

I use the -moz- and -webkit- prefixes for Firefox and Safari and the official box-shadow property for browsers that support this in future. Here’s how it looks:

This paragraph has the dropshadowclass. For browsers that support box-shadow, you should see a drop shadow around it. You will not see this if you are using Internet Explorer 8 or less, sorry guys.

Image link hover effect

An interesting way of applying the box-shadow property is to use it for image link hover/mouseover effects. That’s not the only use of course but I think it’s a good one. In this case, more advanced browsers will see the drop shadow applied but other browsers will see a slightly less decorative effect. Here’s what I mean. Using these declarations in my style sheet I can apply a drop shadow to an image link.

.imagedropshadow {
 padding: 5px;
 border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
 border: solid 1px #CCC;
 -moz-box-shadow: 1px 1px 5px #999;
 -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

The image is shown at right. It has some padding and a border applied but hover your mouse over the image to see the drop shadow (Firefox, Safari and Chrome users).

On mouseover/hover, the linked image shows a drop shadow with Firefox, Safari and Chrome but I have also changed the border color on hover. This is so that Internet Explorer 6/7/8 (and other browsers that do not support box-shadow) see a border color change. Thus, all browsers see a hover effect but more advanced browsers get the drop shadow. Yay!

I think this is a good use for box-shadow. I would be interested to see other uses of CSS3 box-shadow on live websites… so if you know any, let me know.