W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: [css3-images] simplifying radial gradients

From: Alan Gresley <alan@css-class.com>
Date: Wed, 12 Oct 2011 11:34:54 +1100
Message-ID: <4E94E0AE.40209@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Brad Kemper <brad.kemper@gmail.com>, Sylvain Galineau <sylvaing@microsoft.com>, Brian Manthos <brianman@microsoft.com>, "L. David Baron" <dbaron@dbaron.org>, "www-style@w3.org" <www-style@w3.org>
On 12/10/2011 3:58 AM, Tab Atkins Jr. wrote:
> On Mon, Oct 10, 2011 at 2:32 PM, Brad Kemper<brad.kemper@gmail.com>  wrote:
>> On Oct 7, 2011, at 4:07 PM, "Tab Atkins Jr."<jackalmage@gmail.com>  wrote:

>>> Most of the patterns in Lea's gallery don't use any sizing or
>>> positioning at all, only color-stops, and so are equally doable with
>>> either the current syntax or Brad's suggested change.  They would all
>>> need their color-stop positions divided by sqrt(2), though, as Brad's
>>> suggested default sizing behavior is "contain".
>>
>> IIRC, converting them is a matter of multiplying by 1.72 (or thereabouts).
>
> 1.41, which is approximately sqrt(2).


2 squared = 1.414213562373095 / 0.02 = 70.71067811865475

The below test shows what I believe (along with Brad) should be the 
default behavior for radial-gradient which would be contain or closest-side.

<!DOCTYPE html>

<style type="text/css">
html, body {height: 100%; margin: 0;}
body {
   background: -webkit-radial-gradient(blue 70.71067811865475%, white 
70.71067811865475%);
   background: -moz-radial-gradient(blue 70.71067811865475%, white 
70.71067811865475%);
   background: -ms-radial-gradient(blue 70.71067811865475%, white 
70.71067811865475%);
}
</style>

This is also the default behavior for an SVG.

http://css-class.com/test/svg/ellipse/intrinsic.svg



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Wednesday, 12 October 2011 00:35:30 GMT

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