page splitter

Adding A Drop Shadow To Your Web Page

Tutorials

In this tutorial I will show you how to create a drop shadow background for your web page using photoshop and CSS.

In this tutorial I will show you how to create a drop shadow background for your web page using photoshop and CSS.

Creating the Drop Shadow

One of my favorite and simple effects I like to add to web pages are drop shadows. The technique im going to show you can be a bit tricky when you're using a non-solid color background, so im just going to keep it simple and go with a solid color.

So the first step I'm going to use Photoshop to create the drop shadow. To do so we need to get the width of our wrapper which in my example the width has been set to 798 pixels. You will also notice I added a 1 pixel border to the wrapper which actually makes our width 800pixels.

Photoshop - Creating the Layer

  1. In Photoshop click File, select new, then enter 800 pixels for the width, and 300 pixels for the height.
  2. Next add a new layer and call it page. With the paint bucket tool paint the Page layer white or any color you want.
  3. From the menu click Image, and select Canvas Size. Set the width to 840 pixels, the Height 320 pixels, and the anchor to top center.
  4. Double click the page layer to bring up our layer style and select drop shadow. Set the Distance to 0px, spread 10%, and size 10px.
  5. Its pretty important we flatten the layer so we don't lose any shadowing, so lets click Layer and select Flatten Image. If done correctly your box should now look like this:
  6. From the menu click Image and select Canvas Size, and set the height to 1 pixels.
  7. Click File and select Save for web and save this image as a GIF and name it wrapper_bg.gif.
  8. Go a step backward (short cut key Ctrl + Alt + Z ) also make sure the layer is still flattened, if its not then repeat step 5.
  9. From the menu click Image and select Canvas Size. Set the height to 20 pixels and anchor to down center.
  10. Repeat step 7 but name it footer_shadow.gif.

With the images you just saved move them to your images directory on your hosting server so we can use them for your page.

Writing the HTML

Lets check out the HTML for the page were adding the drop shadow too. The div with the ID outer_wrapper is where were going to set our background (wrapper_bg.gif). At the end of our outer_wrapper is where we put the footer_shodow.gif

Copy the script below and paste this into your favorite html editor and save it as shadow.html

HTML

CSS Wrapper Styles

In the CSS script below our two main divs are outer_wrapper and wrapper. The wrapper_outer is used for our background (wrapper_bg.gif). Since our background is only 1 pixel high, in our CSS we need to use repeat-y to be sure our shadow tiles the same height of our page. Our second div wrapper is what holds all our content. Its important if you start getting creative and add more div's and you use float in your css be sure to add some div's with a clear style. With out using clear its possible your shadow background may not tile properly.

Copy the script below and paste this into your favorite html editor and save it as style.css

CSS

For an example of what the drop shadow should look like click here.

Damion Hickman Design, Orange County, CA