Good jQuery drop shadow plugin?

Question

In my free time, I try to learn javascript and jQuery. I generally experiment on the website. I want to achieve a weak shadow effect when an element appears on the page. This gives -

• It looks as if the element is above the other elements on the page.
• and makes this new item important to watch.

How can I get this using jQuery. In some places, they suggested using "shaped sprites." But I want to avoid images for this purpose, because -

• I don’t want to open Photoshop every time I want a shadow effect for some new element.
• Images take time to download. Therefore, as soon as an element appears on the page, it takes time to download the images, and the illusion of the shadow effect will disappear by then.

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

Answer 1

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

This is a pretty good plugin!

Here you can see the demo:

http://dropshadow.webvex.limebits.com/

Answer 2

- . 2007 , .

, , CSS3 - , , . dropshadow, CSS3, !:

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

Answer 3

, jQuery. . div , , . . .

Now I have changed the plugin, and now it uses CSS3 for the shadow effect for browsers that support it, or the same div-based shadow for non-supported browsers. Here is the code:

/**
 * Drop Shadow Plugin jQuery
 * http://sarfraznawaz.wordpress.com/
 * Author: Sarfraz Ahmed ([e-mail])
 */

(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's how to use it:

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