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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 8 Jun 2010 13:03:39 -0700
Message-ID: <AANLkTillvgtaCerc1_DOgiw0FVJPvsAd-mWJVRVlx65Z@mail.gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>
Cc: Brad Kemper <brad.kemper@gmail.com>, www-style list <www-style@w3.org>
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 GMT

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