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

On Thu, Feb 12, 2009 at 12:22 PM, Robert O'Callahan <robert@ocallahan.org>wrote:

> On Fri, Feb 13, 2009 at 8:43 AM, Brad Kemper <brad.kemper@gmail.com>wrote:
>
>> 1. How to deal with soft image edges, where there is variable opacity?
>> Currently, WebKit seems to clip shadows to the vector edge of the border
>> box, and not draw them behind areas of variable opacity (such as
>> backgrounds). It seems like for a raster image that was 50% opaque, it would
>> have draw the shadow behind the whole image at 50% of its normal opacity.
>
>
> That's the way to go. What you would do is construct a mask the size of the
> border-box whose alpha values in the border are the border-image's alpha
> values, and whose alpha values in the padding-box are 1. Then you apply blur
> to that mask (or not)
>

..and then clip out the padding-box from that, which ordinarily would not
have a shadow from the border cast onto it (or does this shadow still get
drawn behind the padding box?)...


> and draw the shadow color through the mask.
>
>
>> Or do you set some sort of threshold on images of varying opacity, and
>> just draw a hard inner edge at 50% and not draw shadows for any pixels more
>> transparent than that? Any of those choices may or may not be what the
>> author wants. Setting the shadow in the image himself provides more options.
>>
>
> Obviously there will always be cases where the border-image/box-shadow
> combination won't produce the exact shadow pixels you want, but you can
> still hack those into the border-image; now your argument is restricted to a
> much smaller set of desired renderings *and* to users who aren't loading
> images *and* who nevertheless care about seeing a shadow.
>

I happen to think that having a good non-image fallback for shadows is a
good goal, and so is having a lot of artistic control over the shadows (as
you can from within an image editor). The solution I've described before
accomplishes those goals when considered independently or together, so it is
a good solution for both goals, and the best solution for just the
overlapping goals case.

I don't think it is that unusual to want to control whether or not a shadow
appears behind a translucent area, or only along the edges. Different images
would have different desired effects, and an image editor is an easy place
to set that.


> Using the border-image as the mask is a great idea. I think we should do
> that. Fairly easy for us to implement too.
>

It would be better than the way it is now, anyhow.


>
>
> Rob
> --
> "He was pierced for our transgressions, he was crushed for our iniquities;
> the punishment that brought us peace was upon him, and by his wounds we are
> healed. We all, like sheep, have gone astray, each of us has turned to his
> own way; and the LORD has laid on him the iniquity of us all." [Isaiah
> 53:5-6]
>