CODEWITHSUNDEEP
htmlcss
CJD
CJD

Reputation: 747

Applying drop shadows to divs

I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.

This is my current HTML for a content box type display: 

<div class="grid_12 boxout-shadow-920">
 <div class="boxout">
  <p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
 </div>
</div>

Boxout CSS: 

.boxout {
 background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE; 
 -moz-border-radius:4px 4px 4px 4px;
 border:1px solid #DDDDDD;
 margin-bottom:15px;
 padding:5px;
}

boxout-shadow-920 CSS:

.boxout-shadow-920 {
 background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}

Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.

So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.

I'm sure there is an easy answer to this - any help is appreciated!

Upvotes: 0

Views: 835

Answers (4)

reisio
reisio

Reputation: 3242

Same technique as rounded corners.

Upvotes: 1

stefanglase
stefanglase

Reputation: 10402

With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.

So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.

See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows

For greatest support through most of the browser engines you should use the following three statements:

box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.

Upvotes: 0

Jason
Jason

Reputation: 52523

Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/

Upvotes: 0

Related Questions