CSS: Easy to do?

Goksly · 3 Feb 2011 at 13:51

I'm messing around with a personal site and when I apply a css class to a div I want it to look like this:

Now I know I could fix the size of the divs and have numerous background images to fit that, but it seems a bit 'wrong'. Is there a way to do it with CSS?

I was thinking maybe have the drop shadow as a back ground image, the filtering done via CSS (as seen here: http://css3please.com/), but not sure how I'd do the top section and bottom section (i.e. no drop shadow on the top, drop shadow all along the bottom).

Thanks in advance!

RoyMi6 · 3 Feb 2011 at 14:26

Could be done quite easily with CSS3... depends how backwards compatible you want it.

http://www.css3.info/preview/box-shadow/

Goksly · 3 Feb 2011 at 15:31

Defo needs to work in IE 7 and 8

tsinc80697 · 3 Feb 2011 at 15:55

two divs

first div has a repeating background which is the full width and shadow either side.
bottom div is the same width but going from the bottom up on the image you provided, it would be about 40px high.

If you have the first div using a repeating background the div can be a variable height dependant on content

Russinating · 3 Feb 2011 at 16:57

^^ This, ish.

www.rghjones.co.uk/files/boxtop.png
www.rghjones.co.uk/files/boxcontent.png
www.rghjones.co.uk/files/boxbottom.png

<div class="boxtop"> </div>
<div class="boxcontent">Content here</div>
<div class="boxbottom"> </div>

.boxtop {
background:url(boxtop.png) no-repeat;
width:499px;
height:32px;
}

.boxcontent {
background:url(boxcontent.png) repeat-y;
width:499px;
height:auto;
}

.boxbottom {
background:url(boxbottom.png) no-repeat;
width:499px;
height:39px;
}

Not tested but that's the jist of it. Pretty simply really.

Goksly · 3 Feb 2011 at 17:45

Thanks guys (and thanks for even slicing the image up - appreciated!)

Was hoping there was some way around having to create extra divs, but it's not a massive deal and gives the required effect.

Thanks.