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

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.

~TJ

Received on Tuesday, 8 June 2010 20:04:35 UTC