Re: box-shadow and features

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?


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.

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).

At this point I could see this inner shadow/highlight painted. 
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. What if I wanted both text-shadow and this inner shadow 
effect for the highlights but at the same time the text was transparent.


Again where does a inner shadow stack with a block element. Does it sit 
below or above the background? Does it appear between the background 
image and border? Box-shadow is painted below background-color.


Alan

Received on Saturday, 17 May 2008 01:33:30 UTC