In my spare time am trying to learn javascript & jQuery. I generally experiment on a website. I want to achieve a faint shadow-effect when some element appears on the page. This gives -

1. This appears as if the element is above other elements on the page.
2. and makes this new element something important to look at.

How can I get this using jQuery. In some places, they were suggesting to use 'image sprites'. But I want to avoid images for this purpose because -

1. I don't want to be opening up photoshop everytime I want a shadow-effect for some new element.
2. Images take time to load. Hence as soon as the element appears on the page, it takes time to load the images & the shadow-effect illusion is gone by then.

Also, I hear CSS3 has this shadow-effect built-in. But there are different browsers out there using different versions. Plus IE* browsers are a majority. I want this to work in all versions of IE. How can I get this effect across most browsers as uniformly as possible.

In my spare time am trying to learn javascript & jQuery. I generally experiment on a website. I want to achieve a faint shadow-effect when some element appears on the page. This gives -

1. This appears as if the element is above other elements on the page.
2. and makes this new element something important to look at.

How can I get this using jQuery. In some places, they were suggesting to use 'image sprites'. But I want to avoid images for this purpose because -

1. I don't want to be opening up photoshop everytime I want a shadow-effect for some new element.
2. Images take time to load. Hence as soon as the element appears on the page, it takes time to load the images & the shadow-effect illusion is gone by then.

Also, I hear CSS3 has this shadow-effect built-in. But there are different browsers out there using different versions. Plus IE* browsers are a majority. I want this to work in all versions of IE. How can I get this effect across most browsers as uniformly as possible.

• javascript
• jquery
• css
• jquery-ui
• jquery-plugins

3 Answers 3

Someone else had the exact same question just the other week two years ago. The selected answer was for an unmaintained drop shadow plugin from 2007, but you may want to take a look at the other answers as well.

Though it's a matter of opinion, I believe that CSS3 is your best bet, providing progressive enhancement to those browsers that support it. Here's a sample set of dropshadow properties as shown on CSS3, Please!:

.box_shadow {
     -moz-box-shadow: 0px 0px 4px #333; 
  -webkit-box-shadow: 0px 0px 4px #333; 
          box-shadow: 0px 0px 4px #333; 
}

I have already written a post on my blog on how to create jQuery drop shadow effect. You can check it out here. The plugin basically creates a div behind those elements to be shadowed to create drop shadow effect. See the demo of that old version here.

I have now modified the plugin and it now uses CSS3 for drop shadow effect for the browsers that support it or the same div-based shadow for non-supporting browsers. Here is the code:

/**
 * Drop Shadow Plugin jQuery
 * http://sarfraznawaz.wordpress./
 * Author: Sarfraz Ahmed ([email protected])
 */

(function($){

    $.fn.dropshadow = function(settings){
        // Extend default settings
        var opts = $.extend({}, $.fn.dropshadow.defaults, settings);

        // Check if CSS3 is supported
        var style = $('div')[0].style;
        var isCSS3 = style.MozBoxShadow !== undefined || style.WebkitBoxShadow !== undefined || style.BoxShadow !== undefined;

        return this.each(function(settings){
           var options = $.extend({}, opts, $(this).data());
           var $this = $(this);

            if (!isCSS3){
                var styles = {
                    position: 'absolute',
                    width: $this.width() + 'px',
                    height: $this.height() + 'px',
                    backgroundColor: options.shadowColor,
                    zIndex: options.shadowLayer,
                    top: ($this.offset().top + parseInt(options.distance, 10)) + 'px',
                    left: ($this.offset().left + parseInt(options.distance, 10)) + 'px'
                };
            }
            else{

                var boxshadow = options.distance + ' ' + options.distance + ' ' + options.blur + ' ' + options.shadowColor;
                var styles = {
                    position: 'absolute',
                    width: $this.width() + 'px',
                    height: $this.height() + 'px',
                    backgroundColor: options.shadowColor,
                    zIndex: options.shadowLayer,
                    top: $this.offset().top + 'px',
                    left: $this.offset().left + 'px',
                    MozBoxShadow:boxshadow,
                    WebkitBoxShadow:boxshadow,
                    BoxShadow:boxshadow
                };
            }

            $('<div>').appendTo($('body')).css(styles);

        });
    }

   // set default option values
  $.fn.dropshadow.defaults = {
    shadowColor: '#DFDFDF',
    shadowLayer: -1,
    distance:'5px',
    blur:'3px'
  }

})(jQuery);

Here is how to use it:

$(window).load(function(){
  $('.shadow').dropshadow({
    shadowColor: '#cccccc',
    shadowLayer: -100,
    distance:'6px',
    blur:'3px'
  });
});

http://plugins.jquery./project/DropShadow

This a reasonably good plugin!

You can see a demo here:

http://dropshadow.webvex.limebits./