Re: box-shadow and features

Brad Kemper wrote:

I tried to edit this. :-)

> On May 16, 2008, at 6:32 PM, Alan Gresley wrote:
> 
>> Brad Kemper wrote:
[...]
>> 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.


I agree.


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


My mistake, you are correct.


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


Confusing...... yeah!


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


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.


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.


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.


http://css-class.com/test/css/shadows/text-shadow2.htm


No box-shadow here but plenty of layers (depth).


Alan

Received on Monday, 19 May 2008 12:31:03 UTC