Give shadow effect with jQuery

Question

I want to give an overlay and shadow effect using jQuery.i with difficulty using it

Answer 1

You do not need the shadow plugin for this. Use the following cross-browser CSS properties and place them in the .shadow class .shadow . Then, using the jquery addClass() function, you can add a shadow class to any element that should have a shadow.

CSS

 .shadow{ -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc'); } 

JQuery

 $('div').addClass('shadow'); 

The above jQuery selector will apply a shadow to the div element. Similarly, you can apply the same shadow class to any element that should have a shadow. You can adjust the CSS properties of the shadow as needed.

Check out the working example http://jsfiddle.net/ttCSQ/1/

Answer 2

shadow part:

 <script type="text/javascript"> $(function(){ $("#exampleDiv").shadow({ width:5, startOpacity:60, endOpacity:10, cornerHeight:8, color:"#000000" }); }) </script> 

this is for the overlay part: http://flowplayer.org/tools/overlay/index.html