css: using simple css to create a great looking site shadow
This is a highly requested feature, and one that people often have a lot of trouble with. Before we go any further, Internet Explorer 5.5 and 6 are not compatible with this method, BUT we do have a simple and clean way of degrading for these browsers so that no one is the wiser.
Step 1: Creating the fades.
Depending on the width of your web site, the colors you have chosen and how profound you want your shadow to be, you may need to create your own shadows in Photoshop (for instructions on how to do this, visit our sister article entitled creating a clean png site shadow in photoshop). In this case, I have created a standard, 760 pixel shadow that should work out of the box on any similarly formatted web site or page.
Header:
Side:
Footer:
Step 2: Creating the CSS
First, let’s cover what you’ll need to add into your stylesheet:
#shadow {width:784px; background: url(images/middle-shadow.png) repeat-y;margin:0 auto;}And here’s where the Internet Explorer 6 fix comes in to play. You will need to create a new stylesheet named ie.css (or whatever you want, just be sure to modify the code below if you change the name), and add this code into it:
#shadowtop{margin:0 auto;height:12px;width:784px;background: url(images/top-shadow.png) no-repeat;}
#shadowbottom{margin:0 auto;height:12px;width:784px;background: url(images/bottom-shadow.png) no-repeat;}
#shadow{background-image:none;}Next, add this into the HEAD area of your web site (making sure that it’s placed below your standard stylesheet):
#shadowtop{background-image:none;}
#shadowbottom{background-image:none;}
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->This will tell Internet Explorer 6 (and below) to ignore the shadow effect. To learn more about what this code snippet is actually doing, check out our article entitled how to create IE specific stylesheets. If you have a solid background color, you can substitute the png files with gifs (with the proper background color embedded) in your original stylesheet, and bypass this step altogether. You can also try one of the many javascript solutions out there, designed to force compatibility between IE 6 and png transparency.
Step 3: Applying the code:
Now to pull it all together. In most circumstances, it’s as easy as adding this to the header:
<div id="shadowtop"></div>Next, add the main shadow DIV to the site, so that it encases the entirety of the design. You can do this just by adding: <div id="shadow">just before your “content” or “wrap” DIV (whichever DIV defines the width and location of your site), and closing this at the end of the page, just after your site footer.
Finally, add this code to the very bottom of your site, below the ending DIV you created for your main site shadow:
<div id="shadowbottom"></div>
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (bypasses fade technique), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
