RE: [CSS3 Text] shadow stacking levels

fantasai wrote:

> > <span>Hello</span><span style="margin-left:-20px;">world</span>
> > 
> > In the above example, if I put a text-shadow on the span with the 
> > negative margin, the shadow is going to overlap the text in the previous 
> > adjacent span, since the text already overlaps.
> > 
> > Even ignoring this issue, like I said before, in our implementation the 
> > shadow draws at the same time as the text.  It is a byproduct of the 
> > text drawing operation.  Even without the negative margin, an offset 
> > could be specified that has the shadow of the second span drawing on top 
> > of the text in the first span.
> 
> Yes, that second effect is something I think UAs should be encouraged to
> avoid. Putting an invisible element boundary in the text shouldn't cause
> the shadow to, for no visually apparent reason, stack over preceding text.
> I understand that doesn't work nicely in your implementation; that's fine,
> that's why it's a should and not a must.
> 
> ~fantasai


The 'visually apparent reason' for drawing a shadow that way is that that's what a shadow does. A tree will cast it shadow over the grass below. So elements later in the source will cast a shadow over elements earlier in the source.  So depending on the source order, shadows can behave as just described or only cast a shadow under itself. A use case is a well known layout with two floats one with a negative margin.

http://css-class.com/test/css/drop-shadows/drop-shadow-over-element.htm


Please view in Safari. If the blue float doesn't cast it shadow over the pale yellow float, how am I to draw that shadow? I hope not with background images.


Alan

http://css-class.com/