W3C home > Mailing lists > Public > www-style@w3.org > April 2010

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

From: Brad Kemper <brad.kemper@gmail.com>
Date: Wed, 28 Apr 2010 14:25:47 -0700
Message-Id: <0D6AA88C-9C7D-4A47-B7D8-994416F85104@gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Sylvain Galineau <sylvaing@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>, Brian Manthos <brianman@microsoft.com>, Prabs Chawla <pchawla@microsoft.com>
Doh! Accidently pressed the send button way early. Please ignore and  
stand by for more finished version.

On Apr 28, 2010, at 2:23 PM, Brad Kemper <brad.kemper@gmail.com> wrote:

>
>
> On Apr 28, 2010, at 1:06 PM, Sylvain Galineau  
> <sylvaing@microsoft.com> wrote:
>
>> Brad, I don't understand what is 'extreme' about my example or why  
>> it's more extreme than your own.
>
> Mine was a little extreme too, but mainly because it is harder to  
> see where spread stops and blur starts when using smaller values.  
> Usually when I spread shadows in PhotoShop, it is by a few points,  
> usually less than the blur amount. When you have a lot of spread and  
> not much (or any) blur, it starts looking less like a shadow, and  
> more like something else. I can't recall the last time I used more  
> than 10pt of spread on anything that was supposed to really look  
> like a shadow. Sometimes, when using it as a faux glow, I add
>
>> But by playing
>> with increasing spread values in both Opera and Firefox - which, as  
>> far as I can tell, implement spread radius as you
>> and Elika define it - then I do reach a point where the shadow's  
>> shape is very different from that of the box
>> being shadowed, as well as that of previous less spread-out shadows.
>>
>> For example, using Opera 10.5x and Firefox 3.6.x :
>>
>>       #ref {
>>           width:50px;
>>           height:50px;
>>           margin:200px;
>>           border: 1px solid black;
>>           border-radius: 5px;
>>           -moz-border-radius: 5px;
>>           box-shadow: 0 0 0 10px blue, 0 0 0 50px green, 0 0 0  
>> 160px red;
>>           -moz-box-shadow: 0 0 0 10px blue, 0 0 0 50px green, 0 0 0  
>> 160px red;
>>       }
>>
>> From the blue to the green and then the red shadow, is the shadow  
>> surface being evenly expanded
>> in all directions ? I think the answer is yes and I gather from  
>> your feedback that this is what
>> spreading is supposed to do. But has the *shape* of the shadow been  
>> preserved all along ? I don't
>> get that part at all. The outer edge of each of the shadows is  
>> visibly different from that of
>> any of the other shadows, never mind the outer border edge box  
>> being shadowed.
>>
>> So it seems I was like Simon: I didn't understand what spreading  
>> was. And then inferred it
>> from a requirement to preserve shape when a spread radius is  
>> applied, requirement I do not see
>> being fulfilled with an even surface spread.
>>
>> I think an example like the one above annotated with arrows may be  
>> helpful in clarifying the meaning
>> of spread radius and I can try to produce one. Most importantly,  
>> what shape is being preserved, or
>> how it is preserved ought to be clarified. Maybe it's just a matter  
>> of making it clear that *only* sharp
>> corners retain their border-radius ?
Received on Wednesday, 28 April 2010 21:26:37 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:26 GMT