Re: [css3-background] CSS Drop Shadows

On Dec 17, 2007, at 11:16 AM, fantasai wrote:

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

It's complicated. I'd settle for the simple solution, which should be  
drawing shadows for both the box *and* the border. Borders can be big,  
though often not, so drawing the shadow only for the box/background- 
color itself might hide the shadow when I would expect the border to  
"cast" it as well. But, this has problems. If the background color is  
rgba(), the shadow might show through, which is counter-intuitive.  
Hell, what if it's a img, with a png? Say square aspect ratio... you  
expect the shadow to put a "halo" of shadow around it, but you still  
might want the plain background color of the parent element to show  
through the png's transparency.

Perhaps acting as if the element were completely opaque, and putting  
the shadow underneath that makes sense. Or maybe it makes more sense  
to account for translucency and transparency in the element, and cast  
shadows as if it really were a shadow... though this undoubtedly makes  
for more complexity.

If I have a div with black borders, and background-color is  
transparent... and the parent element is white. You might expect the  
shadow to not show inside the div, though it will. Should I be forced  
to set background-color to white, to get the intended effect? Even if  
you only render the shadow for the borders, this still won't be an  
effect I'd usually try to accomplish, since with most blurs it will  
show both inside and outside of the div's borders. What about text  
inside the div, should it cast shadow since it's a non-translucent  
part of the div? That'd look kinda freaky, and not be all that  
helpful. I suppose that either way, I should be forced to set the  
background-color to white on the div, to hide these, and give an  
intended effect.

But! If translucent/transparent parts of a div did not cast shadows,  
there are some cool effects there too. The png thing comes to mind.  
You could have a png image element with transparency, and cast a non- 
rectangular shadow behind it without resorting to a second image, or  
cooking it into the same image. I'm just afraid that this is asking  
alot, and I don't want it to cause an even bigger delay in seeing  
shadows implemented in browsers. (Though, at this point, that's really  
only mozilla, I suppose... I think webkit/opera/konq/icab all have it  
at least in beta).


> 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
>

John Oyler
john@discrevolt.com

Received on Monday, 17 December 2007 18:42:51 UTC