|
| |
|
|
ncriptide
Posts: 19
Joined: 10/2/2007
Status: offline
 |
Drop shadow around edges of site - 12/11/2007 10:21:37
I'm new to CSS and I'd like to know how to place a cool drop shadow around the edges of my web site (I usually work in fixed widths - around 750 - 800px wide).
Can someone explain it to me (like you are explaining it to a rock!)?
Thanks!!!
|
|
|
|
Tailslide
Posts: 6050
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Drop shadow around edges of site - 12/11/2007 11:29:50
Firstly what you need to do is open your favourite graphics editor. Create a new image around 760px wide in your main background colour. Now place a new shape on top of that and give it a drop shadow. Fiddle with it so that the edge of the dropshadow comes up to the edge of the 760px wide image. This will act as the template for your page.
From this you need to create 3 images.
1. A slice of the top of the box with the shadow - maybe 10px deep so you've got a little of the left and right hand dropshadow.
2. A slice of the bottom of the box as above.
3. A thin slice of the central part of the box (maybe 5px deep).
What you're going to do is repeat the thin central background image from top to bottom of your main containing div so that you can see the left and right dropshadow. To give the effect of the top and bottom dropshadows you apply the top image to the header (within the container) and the bottom image to the footer - that effectively places these images on top of the top and bottom of the main image giving the impression of a box with a dropshadow all around it. Also it will expand and contract neatly depending on the length of the content.
Say you had a layout like this:
<div id="container">
<div id="header">
Header stuff
</div>
<div id="content">
Content stuff here
</div>
<div id="footer">
Footer stuff here
</div>
</div>
The rules would look like this:
#container {background: url(images/background.jpg) top center repeat-y;}
#header {background: url(images/topimage.jpg) top center no-repeat;}
#footer {background: url(images/bottomimage.jpg) bottom center no-repeat;}
A slightly easier method would be to just have the left/right dropshadow and then you could just apply the thin central strip from top to bottom on the page by putting the background image on the body element.
A slightly simpler way would be to use a wide border around your main container div that was maybe a shade darker than the background image - it's less subtle than using an actual shadow image but it's a lot easier!
< Message edited by Tailslide -- 12/11/2007 11:47:01 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
ncriptide
Posts: 19
Joined: 10/2/2007
Status: offline
|
RE: Drop shadow around edges of site - 12/11/2007 13:48:56
Thanks Tailslide!!!!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
