11 I agree

While it is an interesting technique I have to agree with the other comments above that the addition of extra divs just for the visual effect is troublesome.

Its not that DIVs create problems for screen readers, or that it add too many bytes, etc. Its added complexity the site itself.

One of the joys of moving to a pure standards-based design is that make you actual web page source code a lot cleaner and easier to change/manipulate. All the pretty graphics stuff should be in your stylesheet.

This method re-introduces markup mess into the webpage. Before you may have to sort your way through a mess of nested tables to try and change or fix one small error. I don’t miss those days. Adding nested DIVs is heading us back into that quagmire of obfuscated web page source, and for what reason? A simple visual effect.

It can be useful I guess, if its server generated or javascript generated then the original source code of the page would remain relatively easy to change/fix, but I think I’d rather go with a purely CSS method of adding a visual effect and leave my markup clean and easy to read.

posted at 10:56 am on May 21, 2004 by John H. VanOphem

12 Slight Image Error...

The 5th version of the shadow’s source image wouldn’t allow for expanded shadow lengths, as-is. Like the other 4 examples, it should be a filled in square, I believe.

Nifty styling ideas, and I like the increased extensibility.

posted at 11:26 am on May 21, 2004 by Dave Bug

13 Relax, Chicken Littles...

Some of you even precluded your comments with, “Yes, I read the disclaimer,” but continued to wax standards-zealot on why this is a ‘bad’ or ‘questionable’ approach.

It’s a clear issue: to a standards-savvy developer, this is obviously something meant only for person sites, experiementation, or extreme situations in which you know that the added page weight is acceptable, and any other developers tackling the project would have knowledge of this method’s implementation.

No need to spew the same tired concerns. We’re all familiar with them.

That said, I think it’s an interesting approach, and I am interested in tweaking it myself to be extensible as far as the canvas color is concerned. Currently, this method requires you to ‘hard-design’ your shadow images in correllation with whatever background color they would sit on.

Nice diagrams as well.

posted at 11:38 am on May 21, 2004 by Seth Thomas Rasmussen

14 Two background images in one div.

I think this is great method for now, yes there are some nested divs that increase size, but that is acceptable for now. Until something better comes along, this works great.

[strong]What is that something better?[/strong] Well, I would like to push for in CSS 3 the ability to have more than one background image in an html element. This would solve many problems. I know Douglas Bowman has been pressuring Tantek to consider this in CSS 3 (see http://www.stopdesign.com/log/2004/05/09/blogger.html).
It certainly would allow us to have cleaner html.

posted at 11:52 am on May 21, 2004 by Blake Scarbrough

15 another?

thanks for css drop shadow article #3? #4? Drop Shadow Mania!

posted at 12:04 pm on May 21, 2004 by satapher

16 No extra markup.

It seems like the general consensus is that this method is great – except for the extra markup. So I messed around a bit to see if the same effect could be produced with no extra markup, and only a bit of [removed]

http://wasielewski.org/test/onionskin/test

There’s not much to it – just add class=“shadow” to any element that you’d like to have a drop shadow. Then call dropShadows.js in the head of the page.

As far as I can tell, it works in IE6, Safari, IE5/Mac, and Firefox. I haven’t tested it thoroughly, and I’m sure some of the javascript gurus around here could poke holes in my code, but it’s a start.

posted at 01:01 pm on May 21, 2004 by Zac

17 Good for Rounding Corners Too and A Word on DIVs

I use the multiple nested divs trick often to place more than one background element into a single presentation elements. For example rounding the four corners of a presentation window.

Basically:

<div id=“CornerTopLeft”> <div id=“CornerTopRight”> <div id=“CornerBottomRight”> <div id=“CornerBottomLeft”> Your Content </div> </div> </div>
</div>

I haven’t tried this technique with shadows though and will certainly try. The previous ALA methods I just couldn’t get working across IE/Mozilla as other folks have.

I know there are folks that don’t appreciate that DIVs could be considered meaningful structural elements, but I do and consider them very handy for surrounding every presentation element in the markup so that each element is contained in it’s own comfortable DIV sections. It’s easy on the eyes and if you apply IDs to the divs to work the presentation beneath them then it makes the CSS and the markup more reflective of each other structurally.

Just some thoughts, and really appreciate the consistantly useful and coherent articles here.

posted at 01:04 pm on May 21, 2004 by Chris Rizzo

18 Great Article

Wonderful article and follow-ups, I am very interested in employing this technique in future designs.
The javascript option seems like a great idea and a good alternative to the extra markup.

Thanks again!

posted at 01:33 pm on May 21, 2004 by Katie Dixon

19 :BefTer Drop Shadow

I have created another method. This use only one DIV around the image. Use :before and :after so only works on Standard Browsers. For IE we can use the built-in drop-shadow filter.
http://www.hszk.bme.hu/~hj130/css/before_after/befter_dropshadow/index_nopos.html

posted at 01:59 pm on May 21, 2004 by Janos horvath

20 Great article

That’s the first time I hear about onion skinning css technique. As my title said, great article!

posted at 02:06 pm on May 21, 2004 by Remi Prevost