Adding a Shadow Around the Main Container

[Gary]

Just curious if anyone has played around with adding a shadow around the .container class in BluePrint.

I don't mind using a few graphics.
The end effect would be similar to here:
http://www.hungerfreeforever.com/

Setting a repeating background image is one possibility, but I want to do it without throwing off the content.

[Dan]

I probably wouldn't use blueprint for that:

body { background: url('bg.png') center top repeat-y; }
html { background: url('bg-top.png') center top no-repeat; }
#footer { background: url('bg-bottom.png') center top no-repeat; }

but there are obviously plenty of ways to skin a cat.

Dan

[Anthony Short]

Just make a div around your container called, i dunno, dropshadow,
like so;

<div id="dropshadow">
<div class="container">

etc. etc.

Make a graphic that is around 970px wide, with a drop shadow on either
side, and repeat it as a BG down your dropshadow div. As for the
header/banner, that would just be an image. Alternatively, you could
just make the corners and do it how you would do a normal rounded
corner box.

A rough explanation... I hope that makes sense.

- Anthony

On Feb 21, 8:30 am, Gary <tintin...@gmail.com> wrote:

[baller]

I just added a background to the body tag which was wider than the
container, like this: http://www.lasiksurgeon.com/

body { background: #eee url(path/image.gif) repeat-y 50% 0; }

Another interesting way is to specify certain classes with background
settings to be applied wherever, like this:

.bg1 { background: #eee url(path/image1.gif) repeat-y; }
.bg2 { background: url(path/image2.gif) repeat-x; }
.bg3 { background: url(path/image2.gif) no-repeat; }

<div class="span-24 bg2">header</div>
<div class="span-24 bg1">stuff</div>

etc.

[GPA]

THANKS for all the suggestions folks.

I like the background on the body element. I was thinking something
along those lines... but it won't work for top and bottom shadows...
works beautifully for your site, though.

I think one way that melds a couple of these ideas is this:

.container {
padding: 0 10px;
}

#shadowHead {
padding: 0; /* override the .container padding */
}

#content { background: url("path/shadow-sides.png") repeat-y 50%
0; }

#shadowFoot {
padding: 0; /* override the .container padding */
}

<div id="shadowHead" class="container">
<img src="path/shadow-top.png" width = "970px") />
</div>
<div id="content" class="container">

<!-- website header -->
<!-- website content -->
<!-- website footer -->

</div>
<div id="shadowFoot" class="container">
<img src="path/shadow-bottom.png" width = "970px") />
</div>

Does anyone see any pitfalls in doing it this way? I'm going to try
it next week once I finish up the design. The only thing i THINK I
may have to do (haven't the time to test it right now) is set the
width of shadowFoot and shadowHead to 970px... because once I take
off the padding it will be shorter.

I'm not sure if this is the cleanest way of doing it... and I'd
obviously prefer if the shadow images were in the CSS... but without
making too many changes to blueprint, I'm not sure there is a simpler
way.

[Faizal Heesyam]

that approach is correct if you have a plain background color (no graphic, pattern..etc)
to put some shadows on a graphical background, lots of approach can be use.

- if u have a fixed width and height layout, this should not be an issue as u can just merge the patterned bg with the shadow, and save it as a single file then just applied using the above method (normal background image).

- if you have flexible height, the issue will come on footer. off course we can fixed the header position, so having a shadow which is merged with the background should be fine, same goes to body where people ussually tiled it vertically. then when it comes to footer, some people just simply sacifice their design by removing it, and modified with some graphics. OR, some people use a fixed position for header and footer (sticky header/footer, flexible body/content). this approach only have shadows on the side of the layout.

- or, this is my last resort if i really need to put a shadow on a flexible header, content and footer, i simply make a special divs, position:absolute, embed a transparent png in it (each for top shadow, body and bottom shadow). set z-index:0, and make sure the rest of your layout (container...etc) is set to higher z-index (z-index:1-99). if you ever use position:absolute in your css, you'll understand what i mean. dont forget to set position:relative inside body {...} it's like making a div behind another div. but, yeah... png-24 got a lot of issue these days. it's widely supported in most modern browser, but not ie6. need to apply some hack on that (again? enough with these ie6 hack, on css, now on js? heheh..)

well, all i can say is it depends on the design.. css coder should be able to think and find a solution. different coder have their own idea and i believe they solved things differently.. :)

--
Regards,
Faizal Heesyam