Adding a shadow to your web site using CSS and PNG's

In this example, you can see the very simple shadow we have added on to the site. Notice that it works just fine with the gradient we have as the background. Internet Explorer 7, Firefox, Safari and most others will see this fade, and Internet Explorer 6 and below will see no shadow at all, thanks to this code:

<!--[if lte IE 6]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->

To see how we accomplished everything, view our source code!
Note that Safari users will need to press option + command + u to view source, while Internet Explorer 7 users will need to select "View," "Source" in the toolbar.

Note: To minimize the "corner" effect created by the main page fade, you can create a wider fade for the site, so that the header and footer blend properly into that space, or if you have rounded corners, you can incorporate that fade into your header and footer images.

In that case, be sure that your header and footer are independent. In other words, not located within your main page DIV. This will ensure that you are able to dictate how wide the header area will be, so that the fade does not get cut off prematurely.