CSS Drop Shadows Icon

CSS Drop Shadows

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

CSS Drop ShadowsOverview

Editor: This examples shows how to add a drop shadow to any container element using only CSS (no images). It does this by wrapping the desired content in a DIV with its background color set to the desired shadow color. 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 its original position on the page. The result is a rather rigid- but instant- shadow.

NEW

Fixed some bugs.

CSS Drop ShadowsInformation

Version
3.8
Date
01.13.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.
Accordion Menu Icon
Creating an Accordion Menu is trivial using Accordion Content script
Free
Splash Page Script Icon
A splash page is an interlude page that is shown temporarily before the intended
Free
Color Picker Widget Icon
Color Picker script that can be easily integrated into any form field
Free
All Levels Navigational Menu Icon
All Levels Navigational Menu is a CSS/ HTML list based menu
Free
Featured Content Glider Icon
This script lets you painlessly showcase new or featured contents on your page
Free
Accordion Contentscript Icon
Group contents together and reveal them on demand when the user clicks
Free
Preload Image Javascript Icon
Preload images with style, using this practical script
Free
Watermark Background Image Script Icon
"Watermark" is a word most people in the desktop publishing arena
Free
More
Css Only Tab Menu Icon
This is an example of a simple tabbed menu
Free
CSS clearfix Icon
The problem happens when a floated element is within a container box.
Free
CSS vertical align Icon
In HTML the tag has an attribute name valign which can align content vertically
Free
CSS Drop Shadow Icon
Technique to build flexible CSS drop shadows applied to arbitrary block elements
Free
Simple Tabs Icon
These semantic navigational tabs use the least possible markup and CSS.
Free
CSS Gradient Shadow Icon
Lets you add a shadow to most elements on your page with a customizable shadow.
Free
Flashy Links Icon
Flash is cool but leaves a lot to be desired when it comes to accessibility.
Free
Image Replacement Icon
To see this technique in action, simply hover over or focus on the image below.
Free
More