subject: Cool Website Design Tips 1 - Shadows Along The Edges Of Your Web Page [print this page] A good place to begin this tutorial is at the very beginning as Mary Poppins might have said.
Lets assume that you've made your webpage or are in the process of making it with css. You've decided to create the web page 780px wide and centered it on the screen. You've made the background both sides of your webpage a light gray.
For the sake of this short article Let me assume that your primary page style is called .wrapper and that you have created the wrapper div in the body.
The curly braces don't show in this article but I am sure you understand that they belong at the begining and end of each style.
It looks OK I guess but how much better would it appear if it had a shadow down the length of either side of your white webpage?
I am going to focus on Photoshop for this tutorial mainly because its what I work with but I guess you can use nearly any image editor and adapt the following information to suit.
Open up Photoshop. Create a new file and make it 820px wide and 200px high. The height is simply to make sure we're able to see what were doing but the width is 40px wider than our page - 780px plus 20px on each side.
Color the whole background light gray so that it is exactly the same color as the background on our webpage.
Make a new layer and with the rectangle marque tool produce a rectangle over the gray background 780px by 100px high, color it black.
Now go to select and choose all. Go to Layer and select Align Layers to Selection - Horizontal Centers. This should move your black rectangle to the center of the background from left to right, the top and bottom doesnt make any difference.
So now choose 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 around 70%. Make the size 20px which is the width both sides of the rectangle. And in the colored square click and select black from your swatch.
The graphic should now be 820px wide with a black rectangle 780px wide in the center with fuzzy sides.
OK the blending panel to close it. Now the good bit, if your graphic has got dotted lines around it press ctrl d to get rid of them, now go to Layers - Flatten Image.
Select the cropping tool and crop an area the complete width of the image and also as narrow as you easily can. Press enter to confirm the selection and you'll be left with a strip of your image.
Go to File - Save As and save it as a jpg file. Return to your web page and add the graphic.
To incorporate it you need to wrap your wrapper div with shadow div. In your css add
Put the closing div right after the closing wrapper div.
Now add this to the css:
.shadow
background-image: url(xxxxx.jpg);
width: 820px;
margin: 0 auto 0 auto;
The curly braces don't show in this article nonetheless am certain you understand that they belong at the start and finish of each and every style.
You should have that white page 780px wide centered in the screen with a gray background both sides with an awesome shadow running down each side of your webpage.
