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

On Tue, Feb 8, 2011 at 5:45 PM, Alan Gresley <alan@css-class.com> wrote:
> On 8/02/2011 4:35 AM, Tab Atkins Jr. wrote:
>> 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)

So, lesson time.

Let's simplify the problem, so I can use ASCII.  Imagine we just have
grayscale colors, with transparency.  These can be defined with two
parameters - lightness and alpha.

The non-premultiplied color-space looks like a square:

  ----lightness-->
black          white  ^
     +--------+       |
     |        |       a
     |        |       l
     |        |       p
     |        |       h
     +--------+       a
trans          trans  |
black          white

Going from white (in functional notation, la(255,1)) to transparent
(la(0,0)) involves drawing a straight line between two opposite
corners, so the halfway point is la(127,.5), a partially-transparent
gray.

The premultiplied version of this colorspace looks like this:

black          white
     +--------+
     |       /
     |     /
     |   /
     | /
     +
trans

Note how the space tapers down as you approach full transparency.  At
alpha=.5, the space is half the width.  It can still express the same
range of grays, they're just compressed.  At full transparency,
alpha=0, though, the range compresses to a single point.

Going from white to transparent is still a matter of drawing a
straight line, but the colors you pass through along that line are
different in this space.  The halfway point is la(255,.5), a
partially-transparent white.

The path you take, and the colors you see along that path, are
well-defined and easy to calculate in either colorspace.

Now, instead of the color dimension being a 1D line, imagine it's a 3D
cube.  Alpha adds a fourth dimension, making the colorspace as a whole
either square in the fourth dimension (non-premultiplied) or angled
(premultiplied).  The same basic process applies here in full color as
it did in grayscale.

Does this make things clearer?

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

Going from white to transparent gray still requires extra work, though
the amount of work is slightly less, because the manual curving you
have to provide is lesser.


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

Yup, something like that.

~TJ

Received on Wednesday, 9 February 2011 05:50:58 UTC