Re: [css3-background] error in box-shadow examples?

David Hyatt wrote:
> 
> On Jan 26, 2009, at 1:08 PM, Andrew Fedoniouk wrote:
> 
>> David Hyatt wrote:
>>>
>>> On Jan 26, 2009, at 12:44 PM, Andrew Fedoniouk wrote:
>>>
>>>> Algorithm is close to this:
>>>>
>>>> 1) Draw all elements that have no shadow set.
>>>> 2) Draw shadow for elements with shadow on top of normal elements.
>>>> 3) Draw shapes of shadowed elements (but not their shadow).
>>>>
>>>> By their nature elements with shadows have "z-index" higher than 
>>>> other elements.
>>>
>>> I do not think this is a good idea.  What's in the spec is fine.
>>> dave
>>> (hyatt@apple.com)
>>>
>> I do not think that it is 'fine'. This spec is just silent about how 
>> shadow is drawn
>> with respect of sibling elements.
> 
> It's not silent.  The outer shadow draws just before the background and 
> the inner shadow draws just after.   That's quite clear.

"just before the background" of what? Of the element itself?
And what about siblings of the element? Consider this:

<div #i1 />
<div #i2 />
<div #i3 />

with styles:

div
{
   border:5px solid blue;
   background-color:orange;
   width: 144px;
   height: 144px;
}

Case #1

div#i2
{
   box-shadow:
        rgba(0,0,0,0.4) /* semitransparent, sic! */
        10px 10px
        10px;
}

Case #2

div#i2
{
   box-shadow:
        rgba(0,0,0,0.4)
        -10px -10px
        10px;
}

In #1 case shadow of div#i2 element will be drawn *underneath* div#i3.
In #2 case shadow of div#i2 element will be drawn on *top* of div#i1.

That makes these shadows almost not usable.


> 
>>
>> E.g. if to follow implementation then shadow of some element will be 
>> drown on top
>> of its previous sibling but underneath its next sibling.
>> That is quite naive, isn't it?
> 
> I don't believe it is.  box-shadow is just a decorative effect applied 
> to the edge of a box.  I don't think it's any more or less special than 
> say border-image.  If some box with a shadow is being animated on a 
> page, I would not expect its shadows to be drawn behind the backgrounds 
> of other elements that the box might be sliding over (which seems to be 
> what you're implying should happen).

Seems like you get me wrong.

Either shadow has no meaning for position:static elements as these 
elements do not cast shadow because they are on ground zero already.

If they do cast shadow then it means their z-index is not zero thus
their shadow is getting drawn on top of their siblings. Otherwise
you will have inconsistency as in example above.

This means that elements with outset shadow shall be drawn after their
siblings that have the same value of z-index.

Think about glow-in-focus effect on Mac Aqua input elements. Without
special treatment that glow will be drawn underneath some of
adjoining inputs and on top of some others.
That would be clearly a trivial UI bug.


-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 27 January 2009 03:31:53 UTC