javascript - A Good jQuery drop shadow plugin? - Stack Overflow

admin管理员组

文章数量:1356704

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

Share Improve this question Follow asked Oct 14, 2010 at 4:34 Srikar AppalarajuSrikar Appalaraju 73.8k5555 gold badges219219 silver badges265265 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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./

本文标签： javascriptA Good jQuery drop shadow pluginStack Overflow