Directional Box Shadows

Supplemental 159 views
+1
0 Flares 0 Flares ×

Places a CSS3 shadow directionally displaced on any block element.

.drop-shadow.top {
  box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.right {
  box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.bottom {
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.left {
  box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

Example

Check out the top shadow!
Check out the right shadow!
Check out the bottom shadow!
Check out the left shadow!

Tagged with:
Posted in CSS

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×