O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a box shadow to images

Previously, a visual effect like a shadow under or around an image was only possible by using a second image for the shadow or making the shadow itself part of the image. The problem was that if you ever wanted to adjust the shadow, you had to recut it. Let's look at a modern, smart way to do it using CSS3.

Getting ready

Check out the attractive and subtle shadow around the visual elements at http://thebox.maxvoltar.com. Author Tim Van Damme has applied the new CSS3 box-shadow attribute.

Getting ready

How to do it...

Let's examine the styles to see how Tim achieved that beautifully simple effect:

<style> section { background: none ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required