Drop shadow around edges of site

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Drop shadow around edges of site

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Drop shadow around edges of site

Page: [1]

HTML Templates, Flash Intros, Joomla!,
Wordpress, Drupal, Zen Cart, and More. Click here to shop.


ncriptide Posts: 23 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: 6681
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 >

_____________________________

Little Blue Plane Web Design | Land Rover project

(in reply to ncriptide)


ncriptide Posts: 23 Joined: 10/2/2007 Status: offline	RE: Drop shadow around edges of site - 12/11/2007 13:48:56 Thanks Tailslide!!!! (in reply to ncriptide)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Drop shadow around edges of site

Page: [1]

Jump to: 1

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