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

On Jun 8, 2010, at 1:03 PM, "Tab Atkins Jr." <jackalmage@gmail.com>  
wrote:

> On Mon, Jun 7, 2010 at 10:30 AM, Tab Atkins Jr.  
> <jackalmage@gmail.com> wrote:
>> On Sun, Jun 6, 2010 at 1:04 PM, fantasai <fantasai.lists@inkedblade.net 
>> > wrote:
>>> But super-elliptical corners are relatively rare. A more important
>>> consideration is that we're likely to add other shapes such as  
>>> angled
>>> corners in the future, and I think approach #4 is both easier to
>>> generalize and gives better results.
>>>
>>>    _____
>>>  /      \
>>>  |        |
>>>  |        |
>>>  \______/
>>>
>>> If you take approach #3 with angled corners, I think you'll see that
>>> the shadow spread at the angles is noticeably thinner than at the
>>> straight sides.
>>
>> Would you mind mocking up #3 and #4 visually?  I can't quite
>> understand the difference between the two at this point.
>
> I've gone ahead and mocked it up myself, based on feedback from
> fantasai.  In the following SVG, the first shape shows the shadow cast
> by an angled corner with a UA using #3, while the second shows the
> shadow cast using #4:
>
> http://www.xanthir.com/svg.php?width=800px&height=400px&svg=%3Cpolyline%20points%3D%22360%2C80%20360%2C40%20200%2C40%2040%2C200%2040%2C360%2080%2C360%22%20fill%3D%22%23ddd%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%3Cpolyline%20points%3D%22360%2C80%20200%2C80%2080%2C200%2080%2C360%22%20fill%3D%22white%22%20stroke%3D%22red%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%0D%0A%3Cpolyline%20points%3D%22760%2C80%20760%2C40%20585%2C40%20440%2C185%20440%2C360%20480%2C360%22%20fill%3D%22%23ddd%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%3Cpolyline%20points%3D%22760%2C80%20600%2C80%20480%2C200%20480%2C360%22%20fill%3D%22white%22%20stroke%3D%22red%22%20stroke-width%3D%222%22%20%2F%3E&display=1
>
> The first is simple, because it's just increasing the border radius,
> but it's obviously sub-optimal.  #4 is a "true" spread - the shadow
> always extends the same distance from each edge in the direction of
> the edge.

Ah, I see. Thanks for doing that. The one on the right is clearly  
better, and even the one on the left is better than using scaling.

Received on Wednesday, 9 June 2010 00:27:36 UTC