Wep Page Drop Shadow

Site Links

• Tutorials
• Web Tools
• Icons & Logos

Blogs

• Young Artist on the Move
• Quest For Clicks
• Google Gangsta
• Trip to Oregon
• Rod And Gun Club

Affiliates

• Pixel2life
• Newtuts.com

Adding A Drop Shadow To Your Web Page

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 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

<div id="outer_wrapper"> 
   <div id="wrapper"> 
      <div id="container_header"> 
         <div class="content"> 
            Header
         </div> 
      </div> 
      <div id="container_content"> 
         <div class="content"> 
         <strong>Content</strong> 
         <p>Lorem ipsum dolor sit amet, mollis non neque hymenaeos enim pellentesque 
         dolor, sed vitae id class, in eget euismod tempor mi, nulla pretium, suspendisse tellus 
         sit tellus. Fermentum vestibulum egestas amet volutpat, purus egestas, vehicula nullam 
         ut et interdum. Eget eros libero pharetra nibh faucibus, nibh at sodales massa. Sem 
         lorem eget libero etiam nisl facilisi, mollis a porttitor lobortis nec sit rhoncus, 
         habitasse egestas faucibus urna mus integer luctus, magna ullamcorper nunc porttitor 
         sed imperdiet, integer a vel nec elit. Nec mauris nec rhoncus, neque sed non, turpis 
         est, quis ac, mauris ipsum. At eget amet, amet ut est, nostra consequat, bibendum 
         provident tortor volutpat ac risus. Ut turpis odio rutrum nulla nunc phasellus, nec 
         lacus amet quis.</p> 
         </div> 
      </div> 
      <div class="clr"></div> 
      <div id="container_footer"> 
         <div class="content"> 
            Footer
         </div> 
      </div> 
   </div> 
   <img src="images/footer_shadow.gif" alt="footer"  /> 
</div>

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

* { margin: 0; padding: 0; }
body {
   font: 12px Arial, Helvetica, sans-serif;
   text-align: center;
   background-color:  #FFF; }
 
/* *** WRAPPER *** */
#outer_wrapper { width: 840px; margin: 0 auto; background:url(images/wrapper_bg.gif) repeat-y; }
#wrapper { width: 800px; margin: 0 auto; background-color:#FFFFFF; border: 1px #002B5F solid; }
 
/* *** CONTAINER STRUCTURES *** */
#container_header { background-color: #376B9A; color: #FFFFFF; }
#container_content { background-color: #FFFFFF; color: #002B5F; }
#container_footer { background-color: #376B9A; color: #FFFFFF; }
 
/* *** COMMON *** */
.clr { clear: both; }
.content { padding: 10px; line-height: 1.8; text-align: left; }

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