Re: [CSSWG] Minutes and Resolutions 2009-02-04: box-shadow and border-image

Brad Kemper wrote:
> 
> I think putting the inner shadow within the solid parts of the border 
> would look wrong, because the border is not part of the padding box. In 
> my view, if you were to build an image border that exactly replicated a 
> standard border, then the automatically generated inner shadow should 
> also look the same. I think that s a good test. I should be able to get 
> the same effect as with traditional borders first, and then expand 
> beyond that with decorations that traditional borders can't achieve 
> (patterned borders, illustrated borders, etc.). If I wanted a 
> traditional-looking border, but with, say, a dot in each corner, that 
> should be simple to do with image-border. So please look at this image:
> 
> http://www.bradclicks.com/cssplay/trad-vs-imageBorder.png

Thanks for making the illustrations. It's really great to be able to
see what we're talking about. :)

Right, this image illustrates why inverting alpha values doesn't work. :)

> If the square on the left were drawn with a traditional border, it would 
> look like the square on the right if we put the shadow inside the 
> normally opaque parts of the images of the border-image. That's why I 
> say this is very different from outer shadow, in which the border-edge 
> casts the shadow. The padding box should just look like a hole that was 
> cut by the padding edge, not by the border.
> 
> This is the same reason why I feel that the padding box should be 
> knocked out any OUTER shadow cast by the image-border. If 8 edges are 
> involved in the cast shadow instead of 4, then I'm not able to achieve 
> the same effect and build upon it from there. My expectation is that if 
> I used nothing but straight edges and solid opaque pixels in my border 
> images, I should be able to achieve the same effect as with traditional 
> borders, and not end up with the image on the right side of this other 
> one instead:
> 
> http://www.bradclicks.com/cssplay/trad-vs-imageBorder2.png

This is a good argument for knocking out the padding box for outer
shadows. Robert's point was that here, we assume the author has filled
the image border all the way to the padding edge at least (if not beyond).
Otherwise the effect would look really weird, with the shadows on both
sides like the right side of this image, but clipped sharply at the
padding edge.

> By the way, if I have a dashed border (whether using border-style or 
> image-border) with box-shadow, and had background-clip:padding-box, I'd 
> hope to have something like the following:
> 
> http://www.bradclicks.com/cssplay/dottedAndShadowed.png
> 
> But the current implementations of box shadow I've seen don't give 
> consistent or predictable results when using border-style:dashed with 
> box-shadow and background-clip:padding-box. I would be able to easily 
> create this effect with image-shadow if I created the shadows in the 
> images themselves.

You wouldn't get that by the current definition, you'd get a shadow
around the border box. (Note that background-clip can be different
for different layers of the background.)

Box-shadow is a very simplistic tool. For more sophisticated shadowing,
you'd need a 'shadow' property that triggers a real shadow filter.

~fantasai

Received on Wednesday, 18 February 2009 09:26:41 UTC