Re: [CSS4 color][CSS4 transition] color pre-multiplied vs non pre-multiplied was (Re: [CSSWG] Minutes TPAC Tue 2012-10-30 AM I: Abstract Directions, Transforms, Transitions)

On Sun, Mar 3, 2013 at 10:34 PM, Rik Cabanier <cabanier@gmail.com> wrote:
> On Sun, Mar 3, 2013 at 9:12 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> I don't know how red got in there, if i am trying to create a green to
>> transparent gradient in PhotoShop. I think I would either change all that
>> red to green, or make sure there was green to green in the gradient.
>
> You have a green layer and are just changing the alpha channel
> So green + 100% opacity to green + 0% opacity

It sounds like this use-case is similar to SVG gradients, where alpha
is completely separate from color.  In that case, premultiplication
doesn't even enter into it - you specify each part separately, so
there's no difficulty with a common value like "transparent" implying
a color that the author probably doesn't intend.

>> Anyway, I still don't get your point. How is that like the gradients that
>> would go from green to transparent black, or from red to transparent black,
>> the way Safari does it? I must be missing something.
>
> They don't go to transparent in photoshop. They go from a color with opacity
> to another color with opacity.
> There's no premultiplication like css has so it will be hard for authors to
> reproduce mockups that we designed in other applications such as PhotoShop.

I don't know if gradients that go from an opaque hue to a different
transparent hue are all that common, but you may know better.  In any
case, as I've argued before, you can approximate this really easily
just by adding an extra color stop or two.  Putting a single extra
stop in the middle that manually interpolates the hue is pretty
simple, and does a good job - putting two or three (three is easy,
because you just do half, then half twice again) makes it basically
indistinguishable to my eyes.

That is, to go from rgba(100%,0,0,1) to rgba(0,100%,0,0), and have
that mean "fade from red to green at the same time as you're fading
from opaque to transparent", just set up the stops as:
rgba(100%,0,0,1), rgba(50%,50%,0,.5), rgba(0,100%,0,0)
or
rgba(100%,0,0,1), rgba(75%,25%,.75), rgba(50%,50%,0,.5),
rgba(25%,75%,0,.25), rgba(0,100%,0,0)

This manually arcs the gradient through the premultiplied color-space
to produce a fade very similar to a straight line in
non-premultiplied.

~TJ

Received on Monday, 4 March 2013 19:20:47 UTC