Re: [css3-background] CSS Drop Shadows

Note that box-shadow is implemented in Safari 3 (as -webkit-box- 
shadow).  The implementation that I wrote always draw a drop shadow as  
though it was cast by a solid color fill that is the size of the  
border box.  Border radii are accounted for, so the border box can  
have rounded corners.  Note that there can be some antialiasing  
ugliness at the edges, since in order to do something like this I had  
to draw the fill and shadow together, with the area occupied by the  
fill clipped out.  I think box-shadow is fine as specified, even  
though you can get a bit of ugliness depending on how it's used.

dave

On Dec 17, 2007, at 10: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?
>
> 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 23:59:20 UTC