Re: Shadow knockout

On 01/26/2011 08:05 PM, Eric A. Meyer wrote:
> At 11:57 PM +0100 1/26/11, Mounir Lamouri wrote:
>> On 01/26/2011 11:22 PM, Eric A. Meyer wrote:
>>> My guess is he's asking "if I define a semi-transparent or
>>> transparent background for an element with a drop shadow, why can't I
>>> see the part of the shadow that's 'behind' the element through the
>>> background, and is there a way to make it appear there?".
>>
>> FWIW, it might be harder but it's doable with SVG filters.
>
> I don't doubt it. I do have to wonder why an outset shadow is clipped
> by the border box, though. Because it is a bit weird to shadow a box,
> then decide to make the background transparent and not see the rest of
> the shadow. Is that an ease-of-implementation thing? Or is it that
> because backgrounds are transparent by default, it's thought the shadow
> shouldn't be visible behind the content because that could create
> legibility problems?

A variety of reasons. A knock-out effect is definitely a valid use case,
and it solves most of the common cases for a box-shadow. It's the effect
of drawing the paper, then cutting out the box and lifting it slightly
above the canvas.

When you try to create a "real" shadow, you start running into a lot of
questions:

   * do I want to shadow the dotted opaque border as dots?
   * what if it's a border image?
   * does alpha-transparency on the background change the shadow opacity?
   * what about its color? does red semitransparent create a colored shadow?
   * do I shadow the text, too?
   * do I shadow images?
   * abspos children? what if they're not over the box, but positioned
     elsewhere?

etc. (Answering "yes" to some of the above, btw, means you can't do things
like spread very easily.)

So we decided to keep it very simple, knock the shadow out, and handle
all the rest with a generic filter mechanism that lets you
   a) choose what layers you want to composit and affect
   b) choose exactly what kind of effect you want, whether its shadows
      or opacity or reflections or colored-pencilling

This way we give everybody everything without having to create new syntax
and new properties and new interactions with the z-index stack every time
someone comes up with a new hyper-cool filter effect.

~fantasai

Received on Friday, 28 January 2011 00:29:06 UTC