Love the web

Love the web is a design, programming, and usability blog

Javascript Drop Shadows 11 comments

James Player 11 Dec 2009

Here is an example of a div with the drop shadow class applied to it.

 

To get it to work:

  • First of all you will need to include jQuery 1.3.2
  • Download the zip file
  • Copy the images to your images folder
  • Copy dropshadow.js to your site and include it in your html head tag
  • Go to line 111 and change the path_to_images to the path to your images folder
  • add dropshadow() to any jQuery object
  • If you are using the default images they are 24-bit PNGs with alpha transparency, which means you will need to use the TwinHelix IE PNG fix for IE6

If you would like to use your own dropshadow images:

  • slice up your dropshadows into 8 images like so:

    how to slice up drop shadow images

    The important thing here is to make sure the 4 corner images are all squares that are the same size and their borders line up with each other. The side images need to be as thick as the drop shadow, with the outsides lining up with the outsides of the corner images. The top and bottom images can be any width (as they get repeated horizontally) and the left and right images can be any height (as they get repeated vertically).

  • Save your images in a unique folder e.g /images/my-drop-shadow/
  • Images should be called (going clockwise starting from top center image):
    • ds-top.png
    • ds-top-right.png
    • ds-right.png
    • ds-bottom-right.png
    • ds-bottom.png
    • ds-bottom-left.png
    • ds-left.png
    • ds-top-left.png
  • If you want the dropshadows that you created to be the default dropshadows then change the default variables on lines 111 - 116 of dropshadows.js to match your unique dropshadow images location and sizes.
  • If you want to use your newly created dropshadow on some elements but use the default one on others then don't change the defaults. Instead you need to set the properties when you call dropshadow() on your uniquely styled dropshadow elements like so:

    $('.ds').dropshadow();

    $('ds_alt').dropshadow({
        path_to_images: "/images/different-looking-dropshadow",
        shadow_size_top: 6,
        shadow_size_right: 8,
        shadow_size_bottom: 10,
        shadow_size_left: 8,
        corner_size: 26
    });

The above will draw the default styled dropshadow on anything with a class of "ds", and will draw a different looking dropshadow (one that you created) on anything with a class of "ds_alt"

Cheers

James

Read the next post - Chunked transfer encoding and onDOMReady

Subscribe to these comments

11 comments submit a comment

11 Jan 2010

Dave

This is brilliant James. Cheers.

19 Mar 2010

Matt Sanders

Not a bad Idea.. Good post. I myself have dropped supporting detail oriented features like these for esthetics in browsers that do not interpret css3 specs. Box Shadow is what I've been using for a while now and we've had a great turn-around for explaining why things like this won't work in say IE6 - IE8. However, if the client requests that visuals like this be present in one or all of those browsers we implement something like this.

What are your thoughts?

19 Mar 2010

James

Hi Matt

Thanks for your feedback :)

Yeah box shadow definitely makes things easy, and it would be great if IE came to the party with CSS3. Unfortunately the reality right now is that the majority of our users use IE. Springload is quite design focused, so to say to a client (or the designer :P) that the majority of their users will not be able to view some of the elements in the design isn't really acceptable.

Hence we try and create these types of tools to make tricky designs easier to build.

Cheers!
James

17 Apr 2010

Chris Barrett

Hi,

Great write up.

One question is how do I apply this to multiple div's on the same page?

Thanks

Chris

23 Apr 2010

James

Hi Chris

You need to add it to a jQuery object. Eg if you want everything that has a class of 'ds' to have a drop shadow then you need to use $('.ds').dropshadow()

Cheers
James

28 Apr 2010

Tom

Hey,

How could I get this to work with objects? Without wrapping them in a div of course... Tried mucking around with display properties but no luck.

Cheers,
Tom.

03 May 2010

James

Hi Tom

Hmmm it currently works by adding 8 images inside of the tag and positioning absolutely to the parent. Since you can't add images inside of a self-closing tag that's gonna make it quite hard. One thing I might try is if it's a self closing-tag then the script wraps it in a div (that matches the dimensions of the self-closing tag) and adds the images inside the div.

Will get onto this soon.

Cheers
James

12 May 2010

James

Have fixed this now so that it works with self closing tags such as images

25 May 2010

Dave

Hi

First great plugin!

Am using it together with JQueryUI.resizable and when resizing an element it breaks the shadow. So I added a remove_shadow method to your plugin to make it work.

Here's the solution:

//remove_shadow
$.fn.remove_shadow = function () {
return this.each(function () {
$("img.shadow").remove();
});
};

//Using it with JQueryUI.resizable
$("("#divBox1")
.resizable(
{
start: function (event, ui) { $("#divBox1").remove_shadow(); },
stop: function (event, ui) { $("#divBox1").drop_shadow(); }
});

31 May 2010

James

Nice one Dave!

02 Jul 2011

Sharleena

This makes everything so completely paliness.

Submit a comment

Submit comment