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.
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.
Let's examine the styles to see how Tim achieved that beautifully simple effect:
<style>
section {
background: none repeat scroll 0 0 #EAEEF1;
border: 1px solid #FFFFFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
margin: 0 auto;
padding: 49px;
position: relative;
width: 300px;
z-index: 50;
}
</style>
In addition to other styles, we can clearly see the box-shadow attribute specifying a color and spread distance for the shadow.