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

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:
[snip]
>> 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), 
rgba(0,0,0,0))

-- 
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