Re: [css3-background] box-shadow spread Multiple Choice Question

On Jun 10, 2010, at 11:59 AM, Brendan Kenny wrote:

> However, since the interior of the blur is left undefined, thinking of
> it as a blur brush of diameter (2*radius) is exactly equivalent.
> Either way is probably fine (after all, whether a radius or a diameter
> is to be specified, the other can be found by just multiplying or
> dividing by two), 

However, my understanding was that the existing implementations are making the entire blur width (that is, diameter of the brush or lens) to match the measurement specified for blur "radius".

>> "The blur is perpendicular to and centered on the shadow's edge and defines
>> a gradient color transition ranging from the full shadow color at the
>> endpoint of the blur inside the shadow to fully transparent at the endpoint
>> outside it."
> 
> That looks good. Existing uses of the box-shadow property -- either
> through vendor prefixed versions or in UAs that have dropped the
> prefix (Opera and IE9?) -- will have to be doubled in value to get the
> same effect, though.

I don't think so. For larger blurs, at least, the blur measurement seems to describe the width of the entire blur region, not the width of the portion that extends to one side or the other of the pre-blur edge. 

I just repeated my test using a 50px blur on a black shadow, and (in Webkit) there was a region that when from 51% black to 1% black (ie, nearly white) which started on the pre-blur edge and was 25px wide. The opposite side of the blur was only 22px wide (and went from 99% to 54% black), but at least it was close to my expectation of a total 50px wide region, and  maybe gamma or algorithm or something created the small discrepancy on that side. Maybe there are 3 pixels that are so nearly black that they are coming out as actual black (I'm using Photoshop to measure, and it rounds to nearest integers for percentages).

And I believe that is what the WD says now is based on the idea that the entire region width is equal to the distance that the author puts in for blur. More or less.

However, now I don't know what to think about what the implementations are doing. 

In Firefox, like Webkit, all the shades lighter than 50% are on the outside of the pre-blur edge and all the shades darker on the inside. But the width of the total region is 91px! It has 50px of blur on the inside (the 51%-99% region), and 41px on the outside (48%-1%). In other words, the region is nearly double what it is in Webkit.

If I specify 10px of blur, in both Firefox and Webkit I get about 7px of blur on each side of the edge (for a blur region that is 14px wide). In other words, about halfway between what you seem to have expected and what I expected. Why is there such a difference between what is authored for blur, and the actual region containing the blur?

Received on Thursday, 10 June 2010 22:31:38 UTC