CSS3 Box Shadow Effect

CSS3 has been around for a few years now, but I can remember a time when many of the cool things it can do, had to be done graphically. Some things, like a flexible gradient background, couldn’t be done at all or could only be done with the help of JavaScript. The shadow effects are among the easiest to use among the new tools in CSS3. Surprisingly, you don’t need separate variations for Mozilla and Webkit (Firefox and Safari/Chrome). Unsurpisingly, this feature isn’t supported by IE8. I didn’t have a copy of IE 9 handy, so I wasn’t able to test with that, but I understand that box-shadow is supported. I’m less sure about the inset variation, but who really cares? We’re talking about IE.

The main trick to remember is that if you want the inset shadow effect, you need to apply it to a div instead of an image, and that div needs to have your image as a background. One thing to keep in mind before dedicating yourself to this effect is that if you want your images to be printable or if you need to have them linked (and a transparent gif or png just won’t do for some reason), this will not work for you. Because these conditions rarely apply to anybody, you should be fine.



CSS
<style type=”text/css”>
.img-shadow {
position: relative;
max-width: 100%;
float: left;
border:8px solid #999;
}
.img-shadow::before {
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7);
-moz-box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7);
-webkit-box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7);
}
.img-shadow img {
float: left;
}
</style>

HTML
<a href=”#” class=”img-shadow”><img src=”http://champlai.wwwssr14.supercp.com/champlainwebsites.com//wp-content/uploads/2013/06/train_wheels.jpg” alt=”” /></a>