hounddog32

« Killing flash pop-ups | Main | Project Honeypot »

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 December 1, 2005 10:50 AM

Trackback Pings

TrackBack URL for this entry:
http://www.hounddog32.com/mt-static/mt-tb.cgi/32

Listed below are links to weblogs that reference Another contribution to CSS Drop shadows:

» Shadow Wrangling ( Or “How I hacked Someone Else’s Hard Work”!) from Nothing to See. Move Along
I’m currently reading (albeit very slowly!) “Dom Scripting”, a great book by Jeremy Keith from Clear:Left on , well, scripting the DOM. Not my favourite subject, being a lowly psuedo-geek, but the book is written in English, so I̵... [Read More]

Tracked on December 1, 2005 08:51 PM

Comments

Posted by: Anonymous at December 1, 2005 10:50 AM

Post a comment