Creating drop shadows on elements is almost always done with images only, but it is possible to create drop shadows on elements using just CSS. It is even possible (if ugly and not really accessible) to create drop-shadows of text using just CSS styles and HTML content.
I have never been a huge fan of drop shadows because they are often overdone, and since they are usually done with images, you end up with a page that downloads more slowly without any lasting value added. But there are ways to create drop shadows using CSS alone, and these don't add nearly as much download weight to the page.
CSS Drop Shadows on Boxes
The easiest element to put a drop shadow on is a box element. This is because the element has a pre-defined rectangular shape that the Web browser can easily repeat over and over. To create a drop-shadow on a box element, you simply create a second box element around it and move the second one down and over to create the shadow.
1. Create the main box with content in it.
<div class="content">
<p>This is the div element that will have the shadow on it. You can also shadow images instead of a div with content in it.</p>
</div>
2. Place a second div around the first. This will be the shadow.
<div class="shadow">
<div class="content">
<p>This is the div element that will have the shadow on it. You can also shadow images instead of a div with content in it.</p>
</div>
</div>
3. Style the content and shadow. Position them relative to their place in the flow of the document.
.content, .shadow {
position: relative;
bottom: 4px;
right: 4px;
}
4. Give your shadow a color (grey is standard).
.shadow { background-color: #ccc; }
5. Style the content text and background. If your background color is the same as the page, be sure to set a border so that the drop shadow shows up better.
.content {
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: 0.5em;
}
6. If you want the box to be a specific width, put another div around the whole thing and set the width on that.
<div class="container">
<div class="shadow">
<div class="content">
<p>This is the div element that will have the shadow on it. You can also shadow images instead of a div with content in it.</p>
</div>
</div>
</div>
And the CSS:
.container { width: 200px; }
CSS Drop Shadows on Text - Standards Based but Unsupported
If you want your text to have a drop shadow, there is a CSS property text-shadow that is supposed to set a custom drop-shadow on the text. However, currently no browser supports it.
<h3 style="text-shadow : 0.2em 0.2em;"<This headline should have a drop shadow</h3>
Does text-shadow work in your browser?
CSS Drop Shadows on Text Hack
This solution to the drop shadows on text problem is a hack. It uses deprecated attributes and repeats text so that it's not accessible. Also, because it relies on hiding the text with font colors the same color as the background, some search engine spiders may see it as cloaking and ban the page from the engine. Use at your own discretion. I found this solution on saila.com.
The idea is that you repeat the text you want shadowed but in the same color as the background, and then use CSS to position the shadow and change the color to the shadow color.
Write the HTML like this:
<p class="contains">
This text has a drop shadow.<span color="#ffffff" class="text">This text has a drop shadow.</span>
</p>
Then add the CSS to your style sheet:
.contains {
position: relative;
left: 2px;
top: 2px;
color: #ccc;
font-weight: bold;
}
.text {
position: absolute;
left: -2px;
top: -2px;
color: #000;
}
See drop shadows on text with this hack.
More Help with CSS Drop Shadows
There are also ways to create CSS drop shadows using an image or two for the shadow. The following sites explain how to do it that way. Plus how to do other things with drop shadows.
Simple CSS Drop Shadows - Saila.com's drop shadow hack.
CSS Drop Shadows - Drop shadows using images from A List Apart.
Fuzzy Drop Shadows - An improvement on the ALA drop shadows to make them fuzzier.
Drop Shadow CSS - Phoenity shows how to do it for Mozilla browsers, with methods similar to what I mention above as well as methods with images, and a generated content method for text. The page won't display any shadows in IE 6.
Was this article useful?
