Re: box-shadow and features

On May 19, 2008, at 5:30 AM, Alan Gresley wrote:

> For box-shadow I see this painting order:
>
>
> 1. Outer shadow.  *
> 2. background color of element.
> 3. background image of element.
> 4. Inner shadow.  *
> 5. border of element.

Agreed. Except that with the way I specified it, there would be inner  
or outer, but not both on the same element. I find that acceptable,  
because most of the time people would not need both, and it simplifies  
things to have it that way.


> For text-shadow (painted above the background and border) I see this  
> painting order (condensed):
>
> 1. any underlining affecting the text of the element.  *
> 2. any overlining affecting the text of the element.  *
> 3. the text.
> 4. Inner Shadow.  *
> 5. any line-through affecting the text of the element.

 From what David Wyatt has said[1] , text shadow would be drawn one  
glyph at a time, so steps 1,2, and 5 would clearly take place outside  
of that. So if you apply the box-shadow painting order to the text- 
shadows, you would get something like this (for now leaving out the  
idea of text-outline, which has its own problems that need resolving,  
and ):

1. Outer text shadow.  *
2. color of glyph.
3. Inner text shadow.  *
4. text-stroke (WebKit extension[2])


> As you can see the outer shadow is painted (*) well below the inner  
> shadow in both box-shadow and text-shadow. This is why I suggested  
> box-highlight and text-highlight since each level (feature) has it  
> own name and painting order.
>
> How would the inner text-shadow be painted in this demo if you could  
> only have text-shadow declared once per block element or inline  
> text? View in Safari.

The way I specified it, there would be inner text-shadow or outer text- 
shadow, but not both on the same element. I find that acceptable,  
because most of the time people would not need both, and it simplifies  
things to have it that way.

If I am missing something, perhaps you could give me a simplified  
example, and explain what the problem would be.



[1] http://www.w3.org/mid/4C8CE08F-ACD8-48B8-B316-496CEF179BA6@apple.com
     and
      http://www.w3.org/mid/DB63A502-7271-44E8-B25C-7B01B0CE5481@apple.com

[2] http://tinyurl.com/4ck22x

[3] http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-effect-prop