CSS Image Drop Shadows Background
CSS Image Drop Shadows Icon

This examples shows how to add a drop shadow to any container element using CSS.

10
Downloads
-
0 Ratings
All Versions
10
Total Downloads
0
Downloads Last Week
Current Version
10
Total Downloads
0
Downloads Last Week
Downloads Last 10 Weeks
All Versions
-
0 Ratings
5
4
3
2
1
Current Version
-
0 Ratings
5
4
3
2
1

CSS Image Drop ShadowsOverview

Editor: This examples shows how to add a drop shadow to any container element using CSS and the help of a large shadow image in the background. Virtually identical to the technique used to create a plain CSS shadow, the desired content is wrapped in a DIV with its background image set to an oversized shadow image. The content itself is relatively positioned and shifted slightly upwards and to the left to expose the shadow. A "master" DIV that surrounds the entire markup is also relatively positioned, but shifted to the right and downwards to return the entire markup to it's original position on the page.

IE 6 has difficultly handling nested relatively positioned elements (YADA), so instead of letting IE6 ruin the fun for everyone else, we'll just use conditional HTML to hide the effect in that browser. IE7 is spared for finally learning proper CSS.

New

Fixed some bugs.

CSS Image Drop ShadowsTech Specs

Version
N/A
Date
01.11.10
License
Free
Language
English
File Size
N/A
Developer
Category
SubCategory
Operating Systems
Windows ,Linux,Mac OS,BSD,Solaris
System Requirements
No additional system requirements.

AppsSelected For You

Arrow Comment Box Icon
Dynamic Drive
This CSS code transforms a regular DIV into a fancy box with sub text.
Curly Corner Container Icon
Dynamic Drive
The countless techniques on the web for adding round corners to DIV containers.
CSS Popup Image Viewer Icon
Dynamic Drive
Image thumbnails to pop up an enlarged image onMouseover by using this CSS code.
Overlapping horizontal tabs Icon
Dynamic Drive
Using relative positioning and negative margins.
CSS Tabs menu Icon
Dynamic Drive
This is a basic CSS tabs menu, created from an ordinary HTML list.
CSS Tableless Form Icon
Dynamic Drive
A tableless CSS form let you use as a template for implementing your lightweight