The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jQuery Shadow : create drop shadows of various types

Plugin rate :

Adapted from Nicholas Gallagher's CSS drop shadows without images demo

The purpose of this is to make it easier, as you don't need to remember the specific css class names.

However, this is extremely bad practice... and should not be used for a production site, but feel free to use it for prototyping....

Implementation: 

1. First include CSS & jquery files

1
2
3
4
5
6
<!-- CSS file -->
<link rel="stylesheet" href="jquery.shadow/jquery.shadow.css" />
 
<!-- jQuery files -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery.shadow/jquery.shadow.js"></script>  

2. HTML code (warn to the class)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- standart -->
<div class="box standard">
  <p>text</p>
</div>
 
<!-- lifted -->
<div class="box lifted">
  <p>text</p>
</div>
         
<!-- perspective -->       
<div class="box perspective">
  <p>text</p>
</div>
 
<!-- More exemples at http://syddev.com/jquery.shadow/ -->

3. Finnaly, just call the plugin

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
        $('.box.standard').shadow();
        $('.box.lifted').shadow('lifted');
        $('.box.perspective').shadow('perspective');
        $('.box.raised').shadow('raised');
        $('.box.sides-vt-1').shadow({type:'sides',sides:'vt-1'});
        $('.box.sides-vt-2').shadow({type:'sides',sides:'vt-2'});
        $('.box.sides-hz-1').shadow({type:'sides',sides:'hz-1'});
        $('.box.sides-hz-2').shadow({type:'sides',sides:'hz-2'});
        $('.box.rotated').shadow({type:'rotated',rotate:'-5deg'});
});
Options: 
type
String
Default : "standart" - Can be set to "standard", "lifted", "perspective", "raised", "sides"
radius
Integer
Default : 4 - (pixel), value of the "border-radius" property
sides
String
Default : '' - used when type = "sides", AVAILABLE vt-1, vt-2, hz-1, hz-2
rotate
String
Default : "-3deg" - (pixel), value of the "transform:rotate" property
Screenshots

Comments

This is really cool man. I am a dot net developer. I found your website in google.
Thanks
(http://www.dotnetpools.com)

thanks cool shadow effect

looking for shadow effect

Hi there, this is a great plugin for cool shadow effects.

We have a live customizable demo around this plugin - http://bitconfig.com/jquery-shadow/bitconfig_jquery_shadow.html

Hope this helps!

-Patrick

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
0.1
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [4]