Give shadow effect using jQuery

Question

i want to give overlay and shadow effect using jQuery.i have difficulty in using it

Answer 1

You do not need a shadow plugin for this. Use the following cross browser shadow CSS properties and put them in a class name .shadow. Then using jquery's addClass() function you can add the shadow class to any element that you want to 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 shadow to div element. Similarly you can apply the same shadow class to any element that you want to have a shadow. You can Adjust the shadow CSS properties as needed.

Check working example at http://jsfiddle.net/ttCSQ/1/