Re: box-shadow and features

On May 16, 2008, at 6:32 PM, Alan Gresley wrote:

> Brad Kemper wrote:
>> On May 16, 2008, at 1:11 AM, Alan Gresley wrote:
>>> I will revise my own statement about inner shadow (doesn't make  
>>> sense). I do think that really there should be a property for  
>>> inner shadow such as box-highlight. Yes, quite confusing for  
>>> authors since box-shadow can emulate shadows or highlights and box- 
>>> highlight would do the same.
>> I see no reason to create a whole new property for inner shadow and  
>> call it highlight. An inner shadow is exactly the same as an outer  
>> shadow, except that it is cast on the element (by its negative  
>> space [1]) instead of by the element, creating a "cut out" effect  
>> instead of a "lifted above" effect. It should just be an added  
>> keyword on shadows that defaults to "outer" (you are not likely to  
>> want inner and outer on the same element).
>> And "inner shadow" is a common term. There are many tutorials on  
>> the Web for how to do them in various programs. Here, for instance,  
>> is how to do it in InDesign:
>> http://indesignsecrets.com/making-an-inner-shadow-in-indesign-cs2.php
>> [1] Negative space: http://en.wikipedia.org/wiki/Negative_space
>
>
> Brad, at which level is 'inner' painted?

At this point it is still hypothetical, but please see my answers below.

> http://www.w3.org/TR/2007/WD-css3-box-20070809/#stacking
>
>
> 4. For all its in-flow, non-positioned, block-level descendants in  
> tree order: If the element is a block, list-item, or other block  
> equivalent:
>
>   1. background color of element.
>   2. background image of element.
>   3. border of element.

block-shadow: inner: I would put it above the background image and  
below the border (and below any border image). So, between 2 and 3.  
The shadow would likely NOT follow the shape of the border image, so  
it would look better to have the irregularly-shaped border image above  
it. Text and other content would appear above the shadow at least.


> 7.2.4. For inline elements:
>
>   1. For all the element's in-flow, non-positioned, inline-level  
> children that are in this line box, and all runs of text inside the  
> element that is on this line box, in tree order:
>         1. If this is a run of text, then:
>               1. any underlining affecting the text of the element,  
> in tree order of the elements applying the underlining (such that  
> the deepest element's underlining, if any, is painted topmost and  
> the root element's underlining, if any, is drawn bottommost).
>               2. any overlining affecting the text of the element,  
> in tree order of the elements applying the overlining (such that the  
> deepest element's overlining, if any, is painted topmost and the  
> root element's overlining, if any, is drawn bottommost).
>               3. the text.
>               4. any line-through affecting the text of the element,  
> in tree order of the elements applying the line-through (such that  
> the deepest element's line-through, if any, is painted topmost and  
> the root element's line-through, if any, is drawn bottommost).

Inline content (including underlining and line-throughs) would all be  
above the box's inner shadow, just as it is above the box's background.

> At this point I could see this inner shadow/highlight painted.

For the box-shadow? No, I would not expect that. The box shadow would  
be drawn above the inside of the box itself, not above the box's  
content. To try to draw it above the box's content would be  
impossible, given all the things a box can contain, and not desirable  
anyway. If you look at examples where this sort of effect has been  
rendered, the box's inner shadow does not cover the text or change the  
color of the text in it. The text is virtually always drawn above the  
box (although I am sure there may be a few obscure exceptions).

> Box-shadow is a few layers deeper. If the basic grammar was.
>
> box-shadow:0 0 0 0 color;
>
>
> Where does the inner part work? Where does it go? If it was stacked  
> higher than the text, then it wouldn't be a text-shadow, thus text- 
> highlight.

Now I am confused. You give a box-shadow example, and then talk about  
a text-shadow or text-highlight. The inner box shadow would only  
effect the box. An inner text shadow would only effect the text  
glyphs. The box shadow would clearly be between that box's rectangle  
and its content.

> What if I wanted both text-shadow and this inner shadow effect for  
> the highlights but at the same time the text was transparent.

Sorry. If you use a text-shadow to simulate a highlight on text, then  
you can't simultaneously expect to use it as a more traditional shadow  
too. At least, I wouldn't expect that. I think if you really wanted to  
create a 3d bevel within the glyph, then you should have a separate  
property for that, or else accept the limitations of trying to use  
something called "shadow" to create something that is not really a  
shadow.

> Again where does a inner shadow stack with a block element. Does it  
> sit below or above the background?

Above. Clearly. As I showed in my examples, where the box had a beige  
background and the inner shadows were drawn on top of them. It  
wouldn't do much good if the background completely obscured it.

> Does it appear between the background image and border?

Yes.

> Box-shadow is painted below background-color.

For the outer shadows that are in the draft, yes (in theory, anyway,  
since they don't actually show through the translucent backgrounds).  
Outer shadows would most naturally occur underneath the object, just  
like when objects cast shadows against a surface in real life. With  
inner shadows, it is more like the object is a hole in a vast piece of  
paper, and the shadow is cast upon whatever is behind that hole.  
What's behind the hole is the background properties of the element, so  
the shadow is above that.

>
>
>
> Alan
>
>
>
>