CODEWITHSUNDEEP
javascriptjqueryhtmlcssshadow
sampada pai
sampada pai

Reputation: 41

Give shadow effect using jQuery

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

Upvotes: 4

Views: 14580

Answers (2)

Hussein
Hussein

Reputation: 42808

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/

Upvotes: 9

Ram Kumar
Ram Kumar

Reputation: 590

the 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

Upvotes: 0

Related Questions