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?
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.)
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?
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