Sussex countryside

It's made my business run better! Get a 10% lifetime discount when you Sign up for FreeAgent

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 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;
}

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 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.

Stunning CSS3: A Project-Based Guide: Use this book to work through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration.
» Buy from Amazon.com · Amazon.co.uk

Related Posts

Comments

  1. Daniel

    What about adding transitions to the mix?

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

  2. Fabian Michael

    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 (Author)

    @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

    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

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

  6. Clive Walker (Author)

    @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

    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

    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

    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

    @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.

  11. Mat

    @Ian Thomas: You can use transparency, instead of specifying a hex color, use the new RBGA colors, where you can also specify an alpha value. (ie. box-shadow:inset 0 0 5px rgba(0,0,0,.25);)

    A multiply effect would be nice as well too but that’s for HTML6 maybe? … ;)

  12. Viper Design

    Works like an absolute dream and the fade transition is the icing on the cake. Just need that lazy IE to man-up now! Cheers :)

  13. Saumyasree

    The problem in Box Shadow is with Blur property. If I give blur pixel value more than 999px it crashed the browser. Its not helpful for giving bigger shadow on multiple objects.

  14. GFP63

    If you have a box that you want to use as a button how do you get the shadow/blur to occur when you hover over it? Example:

    http://tinyurl.com/2aabwrp

    Thank you in advance!

  15. Clive Walker (Author)

    @GFP63: Web Designer Wall has a good tutorial on CSS3 buttons with a demo here. If you look at the CSS for the demo, you’ll see that each button has a subtle shadow in the initial state. You can change this on hover to make the shadow more pronounced.

  16. GFP63

    Thank you. That’s great!

  17. DreAnthony

    How would I apply this to my CSS Style Sheet? #StillNewWithCSS

  18. Clive Walker (Author)

    @DreAnthony: The style sheet declarations you need are shown above. There are lots of CSS tutorials out there; have a read of those and it will become clearer.

  19. Generator

    Perfect! Just implemented on our site with transitions.

  20. rick

    It would make sense to include the HTML in the tutorial…for people who aren’t experts and need to see everything thats going on.

  21. Kurt

    Thanks much. I threw in 10px of padding on my image, changed the color #f9f and now I have a roll over button that looks like neon with the same color drop shadow. Thanks. Kurt

  22. Rex

    This helped me and using it I made a simple snippet to show the author info using the CSS3 hover effects http://webstutorial.com/css3-image-hover-effects/css3

  23. kang topjer

    great tuts! very simple image effect

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.





Sponsors

Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!

Subscribe RSS Feed

RSS icon