shading around a box [56K Warn]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

shading around a box [56K Warn]

Post by Luke »

I am working on my company's website, and I need to create a css shadow around my container. My container is fixed width, so would it make the most sense to just make the image one large image in the background? How would you go about laying this out as far as html and css?

I'm trying to achieve this in the best way...
Image
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

A simple solution would be to make a 1px high by X wide image (X is the width of the container) with the left and right shadows and repeat that down in the container. Then use a background-image for the footer div for the bottom part and bottom corners of the shadow.

Code: Select all

#container {
 background: #fff url(bg-container.gif) 0 0 repeat-y;
}
#footer {
 background: url(bg-footer.gif) 0 0 no-repeat;
}

Code: Select all

<body>
<div id="container">
.. content ..
<div id="footer">
copyright bla bla
</div>
</div>
You can do the same with a top image, placing it in a header/logo div background, if you want top rounded corners for example.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

cool... I'll give that a go. :D
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

I did this the other day using pure css. I can't find the code right now but what I did (in a nuthshell) is have the container, wrapped it in as many div's as the shadow was wide and set the background-color for each.

I was bored.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

how did it look?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I'd do the background as a 1px high repeated image in photoshop, repeated. the header / footer images would be separate files. This is the nicest looking, most fool-proof way of achieving the look you want, IMO.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

I use this technique all the time and it works great!

take a look at http://imfinancial.net/ more specifically, the background image http://imfinancial.net/images/bg.png

It's very wide due to the tiled background (diagonal stripes), but if you're on a solid background you can make it the width of the container + (shadow * 2).

I prefer to use the image on the background of the page (body {background: url(.....) no-repeat top center;}).. "top center" is used when the layout is centered, it keeps the background centered on the page no matter how wide the screen is (hence the large width of my image, it will look fine up to 1600x1200, any bigger and you will notice the pattern stops).
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

It looked perfect once I got the colors right. It was easy to re-use, as well.
Post Reply