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

On Thu, Feb 5, 2009 at 12:41 PM, Håkon Wium Lie <howcome@opera.com> wrote:
> Also sprach Tab Atkins Jr.:
>
>  > >  - having box shadows on boxes with border-image seems useful. The
>  > >   argument that one can create these shadows in pixmap editor is not
>  > >   convincing. I don't want to open a pixmap editor, I want to set
>  > >   shadows in CSS
>  >
>  > This I simply don't agree with.  The majority of the time, I (and I
>  > mean I, personally) will be using border-image to create
>  > non-rectangular shapes.
>
> That's fine, you are free to do so.

Well, do you expect the majority of your border-images to be
completely rectangular?  There are certainly reasons to do so, but
from the blog chatter about border-image it is clear that fancy things
like rounded buttons and such will be the most popular use for them.
This matches with my own design problems which will be solved by
border-image.

>  > box-shadow will be more than useless in these
>  > cases - it will produce a completely unintuitive shadow that doesn't
>  > correspond to any visible edge.
>
> Perhaps. The solution is simple: don't set a box-shadow.

That's perfectly fine in the case that you know all browsers are
supporting border-image, and you know that your visitors are
downloading images.  If they suppress border-image, or are using a UA
which doesn't support it at all (but does support box-shadow), the
simple solution doesn't work.

> I'd like to retain the functionality, I find it useful.
>
>  > You say you don't want to open an image editor.  This *is* a valid
>  > concern in *normal* cases, where you are not using an image editor at
>  > all and just want to add a shadow to your box.  If you're using
>  > border-image, though, you're almost certainly creating the image in an
>  > image editor, where adding a semi-transparent shadow is not difficult.
>
> But the end result is an image with a frozen pixmap shadow at a fixed
> resolution and color, forever tied to the border image. I don't want
> that. I want box shadows as vectors that are suitable for printing and
> DOM manipulations, that compress well. They should be setable
> independently of the border image. E.g., it should be easy to change the
> box shadow color when when hovering over the element.

I completely agree that CSS shadows are better than image-based
shadows, what I disagree with is the utility of combining their
*current* implementation with that of border-image.  Perhaps in the
future we can specify the shadowing edge (perhaps by providing a
mask?), but for now the shadow edge is always the outer border block
edge, which will often (nearly always, I think) be different from
visible border edge produced by border-image.

As an example, look at box-shadow's interaction with border-radius.
Though the visible border edge is different from the border block
edge, the case is simple enough that we automatically curve the shadow
along this new edge as well.  If this didn't occur, box-shadow would
be virtually unusable with border-radius.  I think that the current
state of box-shadow and border-image is analogous to the latter
situation, but in the future when it can instead be the former, I
completely agree with removing the restriction on box-shadow.

This would even be reasonably forward-compatible.  Let us assume that
box-shadow will at some point in the future be extended to accept a
mask to define the shadow edge.  It's simple enough to specify that
when both border-image and box-shadow are set on the same element,
box-shadow is suppressed unless it specifies a mask.  (We wouldn't
want to do anything fancy like recycle the border-image as a mask
automatically, because many border-images will have shadows baked in.)

~TJ

PS: Man, border-image seems to create as many problems as it solves.
If only it weren't so useful...

Received on Thursday, 5 February 2009 19:06:19 UTC