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

Re: [css3-background] box-shadow spread radius and rounded corners

From: fantasai <fantasai.lists@inkedblade.net>
Date: Tue, 27 Apr 2010 18:32:31 -0700
Message-ID: <4BD7902F.8040503@inkedblade.net>
To: Sylvain Galineau <sylvaing@microsoft.com>
CC: "www-style@w3.org" <www-style@w3.org>, Brian Manthos <brianman@microsoft.com>, Prabs Chawla <pchawla@microsoft.com>, Bert Bos <bert@w3.org>
On 04/27/2010 05:31 PM, Sylvain Galineau wrote:
> Note: the WG has resolved to add box-shadow back to CSS3 Background&  Borders [1] but as the
> editor's draft has not yet been updated, the following refers to the last document version for which
> it was defined [2].
>
> According to the spec:
>
> # The fourth length is a spread radius. Positive values cause the shadow to grow in all directions by the
> # specified radius. Negative values cause the shadow to shrink. The shadow should not change shape
> # when a spread radius is applied: sharp corners should remain sharp.
>
> The requirement to not change the shape of the shadow seems very desirable from an author standpoint
> e.g. the large spread shadow of an oval-shaped box should be oval as well.
>
> This in turn implies scaling border-radii. One could. for instance, adjust the border-radii of the spread
> shadow by multiplying  them by  (1+((2 *spread-radius)/max(width, height)).  Alternatively, one
> could attempt to obtain better fidelity by adjusting horizontal and vertical border radii independently.
>
> Given that preserving the overall shape is desirable and that the number of alternatives to achieve it should
> be fairly small, is this something implementors are interested in defining interoperably as part of this edit ?

Hm, I didn't realize this was ambiguous.

The simplest definition would be:
   * When border-radius is zero, the shadow's radius is also zero.
   * When border-radius is nonzero, the shadow's radii are increased (or decreased)
     by the spread value. For circular curves, this effectively moves all points on
     the curve outward by the same amount the sides move outward.

However, that might not give a correct "spread" effect for ellipses: I suspect the
concept of pushing the curve "outward" does not work for elliptical curves because,
IIRC, elliptical tangents are not perpendicular to radii. (I suspect pushing the
curve outward--in the direction perpendicular to the curve at each point on the
curve--would result in something that is not an ellipse.)

I'm not quite up to doing the required maths today, maybe Bert can figure it out.

~fantasai
Ellipses are hard.
Received on Wednesday, 28 April 2010 01:33:09 GMT

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