To add a shadow to a box using CSS 2.1

In my previous article; ‘To add a shadow to a box using CSS 3 using the box-shadow property’, we explored the box-shadow property in CSS 3, available in browsers like Safari 3+ and Firefox 3.5+. But plenty of users use Internet Explorer, Chrome, Navigator and such other browsers. How can we have a shadow effect in these browsers? One way is through use of images. I have found out a way to get a shadow effect for box like this:

clip_image002

Though it is not similar to what we would get with the box-shadow property, but we can do with it. Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Box Shadow Example</title>

<style type="text/css">

body{

background-color:#ffffff;

}

.box{

background-color: #ffffff;

width:125px;

border: 1px silver solid;

margin: -1em 0 0 -1em;

padding: 0.5em;

}

.shadow{

background-color: silver;

width:125px;

padding: 0.5em;

margin: 1.5em 0 1.5em 2.5em;

}

.tbl {

width: 40%;

}

td{

padding-right:30px;

}

</style>

</head>

<body>

<table class="tbl">

<tr>

<td>

<div class="shadow">

<div class="box">

<img src="maroon_leaves.jpg" alt=”maroon_leaves”/>

</div>

</div>

</td>

<td>

<div class="shadow">

<div class="box">

<img src="small_plant.jpg" alt=”small_plant”/>

</div>

</div>

</td>

</tr>

<tr>

<td>

<div class="shadow">

<div class="box">

<img src="small_plant.jpg" alt=”small_plant”/>

</div>

</div>

</td>

<td>

<div class="shadow">

<div class="box">

<img src="maroon_leaves.jpg" alt=”maroon_leaves”/>

</div>

</div>

</td>

</tr>

</table>

</body>

</html>

The output of the above code would be like this:

clip_image004

NOTE: The CSS in the above example is internal and not external. However it is advisable to you, to create an external style sheet and add all the styles to it. Then link the style sheet to your webpage.

Filed Under: CSS Hacks, Tips and TricksExpression Web

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (0)

Trackback URL

Leave a Reply