December 01, 2005
Another contribution to CSS Drop shadows
Digging "My contribution to the CSS shadow kerfuffle" I had the same thought as "Bahamas" about javascript, so I googled a little and came up with this helpful site. Adapting brieflt, I have come up with a nice way to add the drop shadows without all the extra markup, just a script reference in the header.
I have kept the original markup that Jeff Harrell did and added my own, in my demo zip file.
Here's how it works: the image is in the body as normal, but with a class (or id, it matters not) of "jsShadow".
<img src="shufflegirl.jpg" class="jsShadow" />
In the head, the javascript file is called. It is long and dull and linked above. It basically finds all items that match the criteria you pass in when you call the routine, clones them, adds the extra markup and then replaces the original with the clone. Then I have to call the script
<script type=""text/javascript">
window.onload = function() {
applyDropShadows("img.jsShadow","shadow");
}
</script>
That gives us this, with no excess markup!
Without Javascript, it degrades nicely, showing the picture as it originally was. With a little hacking of the javascript it will be easy to put a border around the piture to fill the same space without as with the shadow.
Technorati tags: dom CSS javascript drop-shadow
Posted by hounddog32 at 10:50 AM
| Comments (0)
| TrackBack (1)