Our sister article, using simple css to create a great looking site shadow tells how to use three simple png images to create an attractive site shadow. For those who aren’t quite sure how to accomplish this, we will go step-by-step in creating a shadow. Want to skip some of these steps and start with our shadow template?

In that case, you can safely skip to Step 6. For those who would like to know how we got our end result, here’s how we did it:

Step 1: Creating the images.

First, let’s create a 900 x 500 pixel image. This will be your background area, and will be a backdrop for your shadow.

Next, create a second image at 760 x 300 pixels. This is where we will apply the shadow.

Step 2: Setting the stage.
Now that we have our two images, we need to set up our primary image. First, let’s do a “Select All” on your 760 x 300 pixel image. Next, select “Copy” (Control + C), choose the original, 900 x 500 pixel document, then Paste (Control + V). To differentiate the two layers, I added a light blue background color to the primary layer. If you add a background color, your image should look similar to this:

Step 3: Creating the shadow.
Next, right click on your top layer and select “Blending Options.” Select the “Drop Shadow” option and configure. Our only recommendation here is that if you would like the shadow applied in a uniform fashion, modify the “Distance” variable to be zero. Otherwise, the look of this is all personal preference.

Step 4: Trimming the background.
Once you have the shadow just the way you’d like it, it’s time to trim the remainder of the background image away. This is simple to accomplish using the “Trim” feature. Simply navigate to the “Image” drop down and select “Trim,” then press enter on the screen that follows.

Step 5: Preparing the final image.
Next, we want to prepare the image for slicing. We prefer to reduce the fill level to zero on the shadow layer so that only the shadow is visible (this prevents the possibility that visitors will see undesired white space if the shadow becomes misaligned in their browser), but you can skip this if you would like. To set the fill level at zero, simply select your shadow layer, click on the “Fill” slider and reduce to zero.

Finally, we want to convert this layer to a smart object. To do this, simply right click on the shadow layer and select the “Convert to Smart Object” option.

Step 6: Saving the files.
Within the final download file we have created, we added in two image slices to make your job easier. Without those it’s not much harder, just be sure to select the entirety of the shadow just above where the layer begins, like this:

Paste this image into a new document (use the default sizes it creates), and turn off the background on this new image. Save this as a PNG-24 file and name it whatever you’d like, we chose the name top-shadow.png. To make your life easier and ensure that the header and footer shadow are exactly the same, I would recommend next flipping this image vertically (see below), and then resaving as bottom-shadow.png (your post-footer shadow).

Last but not least, select a 1 pixel tall region roughly in the middle of your shadow image (make sure to select the entire width of the image), then copy and paste this into a new document, remembering to turn off the background image. Save this as shadow.png.

You’re done!
Now, to learn how to apply these images to your web site using some very simple CSS, check out our sister article, entitled using simple css to create a great looking site shadow. You can also see the end result of that tutorial right here.

Compatibility:
As this is not technically a web tutorial, there are no compatibility issues between any browsers. It should be noted, however, that this tutorial was created for and using Adobe Photoshop CS3 for Mac. PC users and those with an older version of Photoshop may notice subtle differences between what is shown here and what appears on their application. If you get stuck, just leave us a comment and we will be more than happy to clarify for you.

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!

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.

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;}
#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;}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:
#shadow{background-image:none;}
#shadowtop{background-image:none;}
#shadowbottom{background-image:none;}Next, add this into the HEAD area of your web site (making sure that it’s placed below your standard stylesheet):
<!--[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!