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

On Tue, Jun 8, 2010 at 1:03 PM, Tab Atkins Jr. <> wrote:
> On Mon, Jun 7, 2010 at 10:30 AM, Tab Atkins Jr. <> wrote:
>> On Sun, Jun 6, 2010 at 1:04 PM, fantasai <> 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:!--%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.


Received on Wednesday, 9 June 2010 21:40:53 UTC