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

Re: [CSS3] support for linear-gradients & radial-gradients

From: Alan Gresley <alan@css-class.com>
Date: Wed, 09 Feb 2011 12:45:14 +1100
Message-ID: <4D51F1AA.90406@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Simon Fraser <smfr@me.com>, Peter Beverloo <peter@lvp-media.com>, Irfan Mir <theirf@gmail.com>, www-style@w3.org, Adrian Low <aidypoos@optusnet.com.au>, Chris Lilley <chris@w3.org>
On 8/02/2011 4:35 AM, Tab Atkins Jr. wrote:
> On Mon, Feb 7, 2011 at 9:07 AM, Alan Gresley<alan@css-class.com>  wrote:
>> On 6/02/2011 12:03 PM, Tab Atkins Jr. wrote:
>> My conclusion was based on completely misunderstanding what 'transparent'
>> was. I understood 'transparent' to represent 'inherit' color from ancestor
>> since I believe wrongly that 'transparent' was clear like fully transparent
>> glass. Now I understand that rgba(0,0,0,0) is different from
>> rgba(255,255,255,0) and the other 10 million color in between.
> Well, 'transparent' *is* clear like fully transparent glass.  All the
> zero-alpha colors are, because they're all identical.  But once you
> have a non-zero alpha, it matters what color you have.  So, the choice
> of exactly which transparent color you use as the endpoint is
> important, because it effects the path you take through the
> colorspace, and thus what colors you see along the gradient.

I wasn't really considering non-zero alpha. So rgba(255,255,255,0.5) as 
an endpoint does not work as one (or I) would expect.

> The shape of the premultiplied colorspace is just slightly different -
> it has only a single 'transparent' color, and it just so happens that
> when you draw a straight line from an opaque color to this
> 'transparent' point, the colors you pass through are what you'd get if
> you *just* adjusted the alpha component.

Ok, so I can understand a bit better. Is sRGB colorspace, which I have 
represented in 3D cube. Is this premultiplied colorspace, 
un-premultiplied colorspace or just sRGB colorspace?

>> So we have this.
>> <http://css-class.com/test/css/colors/gradient-yellow-trans.htm>
>> And for the yellow ~ transparent [1] you want the midway point to be
>> (255,255,0,0.5) [2] which when composite on a white background is the same
>> as the midway point between yellow ~ white. This I tried to emulate with
>> tiles [4] for many months where I could have simply used yellow ~
>> rgba(255,255,0,0.0).
> Exactly, yes.  Transitioning from yellow->transparent in premultiplied
> space gives you the #5 rendering automatically, which is why it's
> desirable.

Is it premultiplied space since the values for red and green are always 
the same?

    rgba(255,255,0,1) to rgba(255,255,0,0)

> It does make it more difficult to get a rendering like #7,
> but I'm okay with that.

Does this apply to only the endpoint rgba(0,0,0,0) or does it have some 
change with other endpoints like rgba(127,127,127,0)?

> (To get a rendering like #7 you have to use
> multiple stops to manually specify the path through the colorspace.)
> ~TJ

Something like this perhaps.

linear-gradient(left rgba(255,255,0,1), 50% rgba(127,127,63,0.5), 

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Wednesday, 9 February 2011 01:46:53 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:43 UTC