To add a shadow to a box using CSS 2.1
Minal | Feb 16, 2010 | Comments 0
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:
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:
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 Tricks • Expression Web
