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

• From: Tab Atkins Jr. <jackalmage@gmail.com>
• Date: Wed, 9 Jun 2010 14:40:00 -0700
• To: fantasai <fantasai.lists@inkedblade.net>
• Cc: Brad Kemper <brad.kemper@gmail.com>, www-style list <www-style@w3.org>
• Message-ID: <AANLkTimlGM1_J4JQORKKS7YTr0MZCA7-oEuvytgkC-0w@mail.gmail.com>

On Tue, 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:
>
> [snip long url]
>
> 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.

By request, I've extended my example:

http://www.xanthir.com/svg.php?width=1200px&height=800px&svg=%3C!--%20Angled%20corners%20--%3E%0D%0A%3Cpath%20d%3D%22M%2040%20180%20l%20-20%200%20l%200%20-80%20l%2080%20-80%20l%2080%200%20l%200%2020%20l%20-10%200%22%20fill%3D%22%23ddd%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%3Cpath%20d%3D%22M%2040%20180%20l%200%20-80%20l%2060%20-60%20l%2080%200%22%20fill%3D%22white%22%20stroke%3D%22red%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%0D%0A%3Cpath%20d%3D%22M%20240%20180%20l%20-20%200%20l%200%20-88%20l%2072%20-72%20l%2088%200%20l%200%2020%20l%20-10%200%22%20fill%3D%22%23ddd%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%3Cpath%20d%3D%22M%20240%20180%20l%200%20-80%20l%2060%20-60%20l%2080%200%22%20fill%3D%22white%22%20stroke%3D%22red%22%20stroke-width%3D%222%22%20%2F%3E%0D%0A%0D%0A%3C!--%20Circular%20corners%20--%3E%0D%0A%3Cpath%20d%3D%22M%20440%20180%20l%20-20%200%20l%200%20-80%20a%2080%2080%20-90%200%201%2080%20-80%20l%2080%200%20l%200%2020%20l%20-10%200%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20fill%3D%22%23ddd%22%2F%3E%0D%0A%3Cpath%20d%3D%22M%20440%20180%20l%200%20-80%20a%2060%2060%20-90%200%201%2060%20-60%20l%2080%200%22%20stroke%3D%22red%22%20stroke-width%3D%222%22%20fill%3D%22white%22%2F%3E%0D%0A%0D%0A%3Cpath%20d%3D%22M%20640%20180%20l%20-20%200%20l%200%20-84%20a%2076%2076%20-90%200%201%2076%20-76%20l%2084%200%20l%200%2020%20l%20-10%200%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20fill%3D%22%23ddd%22%2F%3E%0D%0A%3Cpath%20d%3D%22M%20640%20180%20l%200%20-80%20a%2060%2060%2

We now have angled corners, circular corners, and elliptical corners.
In each pair, the first is #3 (easy approximation - just increase the
effective radius) while #4 is as close to a true spread as I was able
to get through eyeballing it.

As I said before, the difference between the two strategies is very
small for round corners.  It's really only visible when you get to new
types of corners.

~TJ