Add Drop Shadows to Your Pictures
By Stephen Bucaro
Adding a nice background shadow to your pictures gives them a nice realistic effect. And,
it's very easy to do with the CSS3 box-shadow property.
The box-shadow property is supported in Internet Explorer 9 and higher, Firefox 4 and
higher, and Chrome. The code for the image with drop shadow above is shown below.
<img border="0" width="230" height="230" src="mcdivitt.jpg" style="box-shadow:10px 10px silver;" / >
box-shadow Syntax
box-shadow: horizontal-offset vertical-offset blur-size shadow-size shadow-color inset;
| Value | Description |
| horizontal offset | Horizontal offset of the shadow. Negative values are allowed |
| vertical-offset | Vertical offset of the shadow. Negative values are allowed |
| blur-size | Size of the blur - optional |
| shadow-size | Size of the shadow - optional |
| shadow-color | Color of the shadow - optional |
| inset | Make it an inner shadow - optional |
Shown below, I have added a blur-size value of 5 pixels. This makes the shadow effect
even more realistic.
<img border="0" width="230" height="230" src="mcdivitt.jpg" style="box-shadow:10px 10px 5px silver;" / >
Shown below, I have added a shadow-size value of 10 pixels.
<img border="0" width="230" height="230" src="mcdivitt.jpg" style="box-shadow:0px 20px 5px 10px #e0e0e0;" / >
The horizontal-offset and vertical-offset properties are applied to a colored box
that is behind and the same size as the picture. The shadow-size property is an increase in
that box size, similar to the border-size property. Note, in the code above that I specified the
shadow-color in hexadecimal format.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
