Re: [css3-background] CSS Drop Shadows

WebKit's implementation does not allow the shadow to draw anywhere  
inside the border box.  Effectively it is as though the shadow is  
being cast by an opaque solid color pattern with the shape of the  
border box.

dave

On Dec 17, 2007, at 12:42 PM, John Oyler wrote:

>
>
> 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 Tuesday, 18 December 2007 00:02:12 UTC