|
Add Drop Shadows to Your Pictures
By Stephen Bucaro
Using CSS (Cascading Style Sheets) it's very easy to add drop shadows to the images
on your webpages. The code for the image with drop shadow above is shown below.
<span style="background-color:lightgrey; width:230; height:230;">
<img style="position:relative; left:-4px; top:-4px;" width=230 height=230 src="mcdivitt.jpg">
</span>
The image is placed inside a <span> element. The style rules for the span set the
width and height of the span to the same width and height as the image. The background-color
rule sets the background color of the span, which becomes the drop shadow. Note that I set
the background color to light grey.
Style rules for the image within the span set its position to relative
and set it's left and top proerties to -4px, shifting the image 4 pixels
to the upper-left of the span. This creates the offset that exposes the background color
of the span.
You can experiment with different offset values and background colors. If you want to
fine-tune your drop shadow colors, instead of using color names, use hexadecimal
color notation. To keep it simple, we'll use the color name in these examples.
In the example shown below, instead of defining a background color for the span, I gave
the span a background image.
<span style="background: url(shadow.jpg); width:244; height:244;">
<img style="position:relative; left:-4px; top:-4px; border-style:solid; border-width:1px;" width=230 height=230 src="mcdivitt.jpg">
</span>
| 
Free Downloads
RSS Feed