[css3-background] CSS Drop Shadows

I'm working on the CSS3 Backgrounds and Borders [1] module with Bert Bos, and
I'd like to start a new Q&A series because I think we need some help: This
time I'll ask the questions, and you give me answers. Ok? :) The first
issue is a complicated one, so I'll start with an easy question. The topic
is drop shadows.

In the latest public working draft [2] we have a <code>box-shadow</code> [3]
property. The point is, obviously, to be able to draw a drop-shadow for a
CSS box. It starts to get complicated once you ask "what happens when there
are semi-transparent parts of the box?" At first we figured 'box-shadow'
should just draw the shadow as if the box was opaque. Then Dave Hyatt, who
had started implementing this, started questioning that logic. We've got
proposals for a 'border-shadow' property to shadow just the border and a
'background-shadow' property to shadow just the background color (but not
the image?), etc. We could also just "shadow everything drawn in this element".
This all sounds rather complicated to me so I want to step back and ask:

What do you, as a web designer, want to *do* with shadows? What's the end
result you want to get?

Show me. Post a few links to stuff from your portfolio that uses anything
beyond pure text shadows, even if it's all done with pure Photoshop(/Painter/GIMP)
graphics. Draw (or explain) a picture of what you want to achieve. Then
maybe we can figure out how best to make it happen in CSS.

[1] http://www.w3.org/TR/css3-background/
[2] http://www.w3.org/TR/2005/WD-css3-background-20050216/
[3] http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow

Received on Monday, 17 December 2007 16:16:18 UTC