A good place to start this tutorial is at the very beginning as Mary Poppins would probably have said.
Let’s assume that you have built your webpage or are in the process of making it with css. You've opted to create the page 780px wide and centered it on the screen. You have made the background either side of your page a light gray.
For the sake of this article Let me assume that your primary page style is called .wrapper and you have created the wrapper div within your 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 seems acceptable I suppose but how much better would it look if it had a shadow along the length of either side of the white webpage?
I will refer to Photoshop for this particular tutorial since it’s something I work with but I guess you could use just about any picture editor and modify the following information to suit.
Open Photoshop. Make a new file and make it 820px wide and 200px high. The height is simply so that we are able to see what we’re doing but the width is 40px wider than our page - 780px plus 20px on each side.
Color the entire background light gray so it's exactly the same color as the background of our webpage.
Make a new layer and with the rectangle marque tool produce a rectangle on 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 will shift your black rectangle into the centre of the background from left to right, the top and bottom doesn’t matter.
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 about 70%. Make the size 20px which is the width either side of the rectangle. And in the colored square click and select black from the swatch.
Your graphic should now be 820px wide with a black rectangle 780px wide in the center with blurry edges.
OK the blending panel to close it. Now the good bit, if the image has got dotted lines around it press ctrl d to remove them, now go to Layers - Flatten Image.
Choose the cropping tool and crop an area the full width of the graphic and also as thin as you easily can. Press enter to verify the selection and you will be left with a wide strip of your picture.
Go to File - Save As and save it as a jpg file. Go back to your page and insert the image.
To incorporate it you must wrap your wrapper div with shadow div. In your css add
Place the closing div 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 do not show in this article but I am certain that you realize that they belong at the start and end of each style.
You should have that white page 780px wide centered in the monitor with a gray background each side plus an awesome shadow running down either side of the page.
Author Resource:
I hope you enjoyed reading this quick tip, look out for more by STF-Web Designs, visit us for more web design articles.
If you are in need of Professional custom web design, SEO or Internet Marketing services at unbeatable prices - invite me on eLance. hostgator coupon hostgator discount
![[Valid RSS feed]](http://www.look4articles.com/images/icon_Rss.png "XML Feed For RSS"){kind=icon}
Category Rss Feed
Print This Article
Add To Favorites
![[Valid RSS feed]](http://www.look4articles.com/images/rss.jpg "XML Feed For RSS")