Cool Web Design Tricks 1 – Shadows Down the Outsides of Your Webpage

Ever wondered how to get those neat shadows along the edges of your webpage to give it that slick three-dimensional look? Read on and let me explain exactly how to do it the easy way.

A good place to begin this tutorial is at the very beginning as Mary Poppins would probably have said.

Let’s imagine that you have made your webpage or are in the process of making it with css. You’ve decided to create the page 780px wide and centered it on screen. You have made the background either side of the webpage a light gray.

For the sake of this article I am going to assume that your main page style is called.wrapper and that you have created the wrapper div in the body.

It looks okay I suppose but how much better would it look if it had a shadow along the length of either side of your white page?

I am going to refer to Photoshop in this tutorial mainly because it’s something I use but I assume you could use almost any image editor and adapt the following information to suit.

Start Photoshop. Create a new file and create it 820px wide and 200px high. The height is simply to make sure we can see what we’re doing but the width is 40px wider than our page – 780px plus 20px on both sides.

Color the whole background light gray so that it is exactly the same color as the background on our web page.

Create a new layer and with the rectangle marque tool create a rectangle over the gray background 780px by 100px high, color it black.

Now go to select and choose all. Go to Layer and choose Align Layers to Selection – Horizontal Centers. This will shift your black rectangle to the centre of the background from left to right, the top and bottom doesn’t matter.

Select the black rectangle layer. Double click the thumbnail or open the blending options any other way you prefer. Go to Outer Glow, set the screen mode to normal, set the opacity to about 70%. Make the size 20px which is the width each side of the rectangle. And in the colored square click and select black from your swatch.

Your graphic should now be 820px wide with a black rectangle 780px wide in the center with blurry sides.

OK the blending panel to close it. Now the good bit, if your picture has dotted lines all around it press ctrl d to get rid of them, now go to Layers – Flatten Image.

Choose the cropping tool and crop a region the entire width of your graphic and also as narrow as you easily can. Press enter to verify the selection and you’ll be left with a wide strip of your image.

Go to File – Save As and save it as a jpg file. Go back to your page and add the graphic.

To include it you must wrap your wrapper div with shadow div. In the css add

Place the closing div following the closing wrapper div.

At this point add this to your css:

.shadow
background-image: url(xxxxx.jpg);
width: 820px;
margin: 0 auto 0 auto;
The curly braces don’t show in this article but I am sure you realize that they belong at the beginning and end of each style.
You should have the white page 780px wide centered in the monitor using a gray background each side with an awesome shadow running down either side of your web page.

I hope you liked this quick hint, watch out for more soon.