What's the current best practice for creating drop shadows around html?

I used to use a table and have 8 png images (4 sides and 4 corners) as backgrounds for each of the outer 8 cells with the html I want the drop shadow around in the middle cell. Not very semantic, but at least the drop shadow imagery were backgrounds and it was liquid... html was ugly, tedious and maybe not very SEO friendly.

Is there a more compatible (though I don't remember having browser issues at all) way now or is there a more semantic way of handling this?

I don't care about IE6. I use jquery, so a javascript/jquery mechanism, as long as there are no compatibility issues among modern browsers, is fine with me.

  • Is strict HTML a requirement or do you use CSS too? MAINERROR almost 8 years ago
  • CSS and/or Javascript/jQuery is expected to be used Scott Mueller almost 8 years ago

3 answers

Doug 1095

If you don't demand precise control over the exact look of the drop shadow and also don't require identical cross-browser display, try using the box-shadow CSS property. It requires minimal additional markup (actually no additional markup), no additional image downloads, is SEO-friendly and degrades nicely for older browsers.

Here's an example of the syntax for cross-browser compatibility:

-webkit-box-shadow: 2px 3px 12px #222;
-moz-box-shadow: 2px 3px 12px #222;
box-shadow: 2px 3px 12px #222;

You can even use alpha-transparent colors and specify multiple drop shadows simultaneously:

-webkit-box-shadow: 0 0 2px rgba(200,200,200,.7), 2px 3px 12px #222;
-moz-box-shadow: 0 0 2px rgba(200,200,200,.7), 2px 3px 12px #222;
box-shadow: 0 0 2px rgba(200,200,200,.7), 2px 3px 12px #222;

EDIT: Left out the commas in the second example.

EDIT 2: Just for fun, here is an example. (Don't forget to hover over the image.)

Answered almost 8 years ago by Doug
  • I think that sacrificing drop shadows in older browsers that don't yet support CSS box shadow is a fair trade for clean, semantic HTML markup that will still be accessible in every browser due to its simplicity. Josiah Sprague almost 8 years ago
  • This is what I was looking for, thanks! But you didn't mention the very important (in my case) spread value to make a drop shadow that appears on all sides. Scott Mueller almost 8 years ago

You can use the new CSS3 abilities as Doug suggested:

-webkit-box-shadow: 5px 8px 2px #000;
-moz-box-shadow: 5px 8px 2px #000;
box-shadow: 5px 8px 2px #000;

And add support for IE6/7 adding "IE-CSS3.htc" This will add some limited support for some of the CSS3 new super powers. Shadow is one of them.

Check the link: http://fetchak.com/ie-css3/

PS: i know, more files to download... but if they using IE6 on the XXI century they kinda deserve it right?

Answered almost 8 years ago by pabloacastillo
  • I'll check out ie-css3, thanks. Scott Mueller almost 8 years ago
Tony B 86

CSS 3 box shadow and text shadow are nice but are not supported very well if at all in any current IE versions. Try -webkit-box-shadow: 1 1 3px #000; and box-shadow: 1px 1px 3px #888; in your CSS. Note that these will degrade into nothingness in browsers that don't support CSS3 yet

Answered almost 8 years ago by Tony B
  • The trade-offs for supporting non-compliant browsers are always a consideration and will differ for each project. FWIW, IE9 will support box-shadow. Doug almost 8 years ago