W3C home > Mailing lists > Public > www-style@w3.org > March 2013

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)

From: Dirk Schulze <dschulze@adobe.com>
Date: Mon, 4 Mar 2013 11:39:36 -0800
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Rik Cabanier <cabanier@gmail.com>, Brad Kemper <brad.kemper@gmail.com>, Liam Quin <liam@w3.org>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <DE155621-0C04-46C7-8420-0F1566C75D28@adobe.com>

On Mar 4, 2013, at 11:19 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

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

In the past we did indeed just support RGB colors in SVG and alpha was set independently from the color. This is no longer the case. We reference CSS3 Colors in SVG now and all browser implementation support for RGBA and 'transparent' on gradients and animations now (animations with the exception of IE).

> 
>>> 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:40:15 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:06 GMT