Re: [css3-background] box-shadow spread radius and rounded corners

On Apr 28, 2010, at 6:25 AM, Sylvain Galineau wrote:

>> From: Brad Kemper [mailto:brad.kemper@gmail.com]
>> Sent: Wednesday, April 28, 2010 12:23 AM
>> To: Tab Atkins Jr.
> 
> 
>> 
>>> I don't think I like the idea of a discontinuity where sharp edges
>>> stay sharp, but rounded edges get fatter.
>> 
>> I don't know why you'd find that suprising. When you have a thick
>> border, the radius on the inside of the border-radius is different
>> from the radius on the outside. Think of this as a sort of extra
>> border-width around the shadow shape, but with border-radius defining
>> the inside radius of that extra borders's corners instead of the
>> outside radius.
> 
> Brad, if you and other others want an effect whereby the shadow of a 
> rectangular box with nearly sharp rounded corners could, given enough 
> spread, turn into a near circle, then that's what we're going to give 
> you. (The smaller the box, the smaller the spread needed to turn the 
> shadow of a box into a blob).

The outer radius of the spread corners does not extend any further into the straight-side parts of the path than the rounded corners of the border-box. So, it is no more of a blob or circle than the original box.

> But if that is the desired effect then the spec cannot require that
> "The shadow should not change shape when a spread radius is applied".

I agree that the wording there may need a little work. The intent when we agreed to add that part was that sharp corners could be kept sharp, not to otherwise change the established meaning of "spread".

> If we simply add the spread radius to each border-radius, we *are* 
> changing the shadow's shape.

By dint of the fact that a spread is not just a scaling, ANY other interpretation other than just simple scaling is going to result in a somewhat different shape. But we've had this much of the conversation before: spreading and scaling are not the same thing.

> And the bigger the spread radius is 
> relative to the element's width/height the more distorted that shape 
> will be compared to the original.

You say distorted, but the width of the spread is remaining even around the entire path, except for where you need to add sharp corner joins. That is not distorted to me, that is consistent spread. Distorted would be if that spread width was not consistent.

By the way, the requirement to keep the corners sharp actually makes this different from every other example of spread I am aware of, by the way. It would not be possible on raster images (which is where I usually see spread). Even traditional (pre-DTP) analog spread, which used to be done by diffusing light from a fully developed high resolution film through a piece of frosted acetate onto another piece of high resolution film to be developed, did not have sharp corners. 

I can see where it might be desirable with rectangular boxes, but I want whatever we decide to work equivalently when we move beyond rectangles. Doing it the way I described (like a thickening that is accomplished the same way as in PostScript editing programs, i.e. add a same color stroke around the edge), would allow us to eventually also have an equivalent "spread" value in vector objects such as SVG. But if we wanted this idea to also work equivalently for images some day, we should forgo the requirement for sharp edges, or accept that it would work the same except for the sharp edge part. Which even that way would be similar to what you'd get if you stroked the edge.

> See the attached file for my previous example. The top box is the
> one you want a shadow for. No blur, but a 50px spread. Adding
> the spread to width, height and border radii gives you the top
> black box.

I posted a link to a similar example.

> Scaling up the radii gives you the bottom black box.
> 
> I think the spec implicitly requires the shape of the shadow to
> be that of the bottom box, or something very close to it.

I don't. Not at all. It is an extreme example, so it looks odder than what you'd see in practice, but the top box is exactly what I'd expect. If you wanted to do an equivalent spread on a five pointed star with rounded tips, how would that look? How about for something that shaped like a kidney bean?


> Elika's
> definition says that it should look like the top black box.

Right, because we discussed all this before, and had a clear definition, which she put into the spec.