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

On Feb 17, 2009, at 12:56 PM, fantasai wrote:

>> My view, as stated before, is that "inset" shadows should have  
>> nothing to do with image-border. They are a decorative effect on  
>> the padding box.
>> Imagine a box with a thick border and a thick inset shadow. It  
>> looks a little like a frame casting a shadow through a cut out  
>> space onto a surface below. Now replace the border with an image of  
>> a straight-edged picture frame that followed the same edges.  
>> Wouldn't you still expect the cut-out effect of the padding box to  
>> be the same? If you you inset the image of the border, you end up  
>> with a completely different area being cut out (unlike with outer  
>> shadows).
>
> The same thing is true of outer shadows. Look at the diamond border in
> the draft, for example. Imagine an outer shadow on that. Now imagine  
> an
> inner shadow. Now consider what we're proposing to do. Putting an  
> outer
> drop-shadow on the border-box would be wrong. Similarly putting an  
> inner
> drop-shadow on the padding-box would be wrong. Neither the inner nor  
> the
> outer edge is rectangular. Drop-shadowing the image based on alpha  
> values
> would give a drop-shadow on the border image itself, which might  
> look ok
> but isn't the same effect as you typically get with box-shadow. And
> clipping that shadow within the padding box would look wrong.

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

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

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.

Received on Wednesday, 18 February 2009 05:53:44 UTC