CSS3 box-shadow and image hover effects

Posted in on 22 January 2010

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 not absolutely 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, 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;
}

Lime with green background 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 (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.

Related Posts

Comments

  1. Daniel 25 January 2010, 12:57 1

    What about adding transitions to the mix?

    .imagedropshadow {-webkit-transition:all .2s ease-in;}

  2. Fabian Michael 25 January 2010, 13:48 2

    It looks great when you combine this with a CSS transition (currently only working in Webkit based browsers). I used this on my photoblog site when browsing through the photos. Check it out here (you’ll need either Safari or Chrome to see transitions, the box shadow will work in Firefox anyway).

    Greetings, Fabian

  3. Clive Walker 25 January 2010, 15:00 3

    @Daniel, @Fabian: Yes, transitions look very nice. I have not looked into CSS transitions in depth yet but I tried out a quick example with the CSS above and it’s definitely something I want to use! Thanks for the suggestions!

  4. Stephen Webb 26 January 2010, 10:14 4

    Every time I read about CSS3 it seems the possibilities are fantastic and can save you a huge amount of time in programming backgrounds and various other properties.

    Box shadow effects are certainly a main feature of the CSS3 property, and as shown here they can have great effects on the aesthetics of the page. The only issue of using CSS3 at present is the obvious fact that IE doesn’t support it. I wonder when Microsoft will update IE to comply to these new standards, as surely they will have to when the platform is eventually rolled out.

    I’ll be looking forward to reading more CSS3 development as they are rolled out, and further tutorials covering this next stage of the webs development. Thanks for a great article.

  5. Harry Roberts 26 January 2010, 12:01 5

    Use box-shadow with care though—it’s been dropped from the CSS3 spec.

  6. Clive Walker 26 January 2010, 12:16 6

    @Harry: I read about the box-shadow spec here but I’m hoping that it will re-emerge and/or that browsers like Firefox and Safari will not drop their proprietary versions. For the moment, the method is OK with FF and Safari. Fingers crossed that it will stay that way.

  7. Brad Miller 26 January 2010, 19:19 7

    Gazaro makes use of the CSS3 box-shadow throughout the site (layout, drop-down navigation, product images). It’s an easy effect that can completely revamp an interface if used correctly.

  8. James Panton 26 January 2010, 19:27 8

    From the w3c site: This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.
    So, we should be safe :-)

  9. Ian Thomas 1 March 2010, 01:05 9

    It would be nice to have some sort of alpha control over this effect as I have run into the situation where the shadow is over both light and dark colours and it looks a little shonky.

    Make it so it’s dark enough to work properly on the dark background and it’s too strong on the light one. The other way around and you get a glow on the dark background but a nice effect on the light.

    Perhaps we need a blend mode ‘multiply’?

  10. Dean 2 March 2010, 06:06 10

    @Ian: I’m not entirely certain if it would work, but perhaps using RGBa to specify colors, and using a lower opacity might help the situation.

Textile Help
Stop looking at my bottom