Drop shadows are a nice way to add dimension to a site. Creating them used to be a real task. Combining multiple divs and floats and trickery with CSS that were basically hacks. Not to mention how difficult it was to accomplish creating shadows programmaticlly. Well, making a drop shadow on an image is easy now thanks to CSS3!
Enter the box-shadow element! The box-shadow element is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. The syntax of the box-shadow CSS3 element is as follows:
box-shadow: h-shadow v-shadow blur spread color inset;
The box-shadow element is a comma separated list of properties that effect the position and size and color and even the opacity of the shadow. Note the inset perimeter. That controls wether the shadow is inside of or outside of the object getting the shadow.
.image-framer img {
border-radius: 5px 5px 5px 5px;
/* box-shadow: h-shadow v-shadow blur spread color inset;*/
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
}
The first to parameters control the horizontal and vertical position of the shadow.
Next is the optional blur distance measure followed by the optional spread (or size) of the shadow.
The next paramiter is the color parameter. Here is where you can use the new CSS3 rgba(0, 0, 0, 0.5) element. With the rgba(0, 0, 0, 0.5) element you can control the opacity as well. Or you could use the color number here if you like without opacity.
OK, well, enough talk. Go try it out!