Re: [css3-background] box-shadow syntax

On May 14, 2008, at 5:49 PM, David Hyatt wrote:

> On May 12, 2008, at 9:55 AM, Brad Kemper wrote:
>> Here is my mockup:
>>
>> http://bradclicks.com/cssplay/Shadows.html
>>
>>
>>
>
> One thing that bugs me about this rendering of spread is the  
> implicit use of round joins on the stroke instead of miter joins  
> when cast is set to outside.
>
> My understanding of spread is that basically you take a shape (e.g.,  
> a glyph for text-shadow, a box for box-shadow) and you combine the  
> filled glyph shape with a stroke of the shape that extends outside  
> the fill by an amount equal to the spread.  The composed shape (fill 
> +stroke) can then have its shadow rendered offset by the spread to  
> achieve the renderings you are showing.

Yes, that is the way I was proceeding, although I had to simulate some  
of it. The (outer) shadow would start out as a duplicate shape as the  
original border box, filled with whatever color is specified, then a  
stroke added (fully outside of that, not centered on the edge), in  
that same color (the spread), and then blurred by amount just large  
enough so the very outer edge of the blur is 'blur radius" in distance  
from the outer edge of the "spread box". And the result is moved  
spatially based on the x and y offsets.

Conceptually, inner shadows work in exactly the same way if you think  
about the letter forms or boxes as being part of a compound shape. For  
inner shadows, that shape gets a big rectangle added to the outside of  
all its other paths (turning negative shapes, like the counter-space  
of the "A", into positive shapes), and then the whole thing is clipped  
to the starting paths. That is why the counter spaces of the letters,  
when looked at by themselves, seem to cast an outer shadow on the rest  
of the glyph's background color.

> However when cast is outside you seem to be making assumptions about  
> the line joins used by the stroke.  In particular instead of a miter  
> join, you are using round joins.  My question is, is this intentional?

Actually no. I didn't give much thought to the side effect of the way  
the corners are joined. Although being a long, long time Adobe  
Illustrator user, I am familiar with what you mean. So, for instance,  
the corners of the "A" in the example where I have "spread:5px" and  
"cast:outside" (second example down, on the left), show round corners  
(same as the triangular "hole" of the "A" for inner-shadows, as  
fantasai points out). That is actually the result of me using  
PhotoShop instead of Illustrator for this. It doesn't use a true  
stroke for its spread, because its shadow effect is not just for  
vectors. So it just widens the shadow with something similar to a  
minimize filter.

I'm not sure if the order I listed above  is actually the best order  
to do things in. Maybe it is better to blur first, and then apply the  
spread to grow it outward. That may avoid That would mean doing it  
more in the PhotoShop way instead of using vectors though, I think.


> It seems especially odd to use round joins for box-shadow to me,  
> when the box itself could actually have specified a "rounding join"  
> of its own via a border-radius (at which point I would expect the  
> spread to simply follow the curve of the border-radius).
>
> dave
> (hyatt@apple.com)
>
>