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 25/11/2012 8:14 AM, Rik Cabanier wrote:
> On Thu, Nov 22, 2012 at 2:39 AM, Alan Gresley <alan@css-class.com>
> wrote:

>>> Tab: Because CSS gradient has been pre-multiplied for a while.
>>>
>>
>> But still FF17, Chrome 23 and Safari 5.1.7 show gradients in non
>> pre-multiplied for what is now longer that a year since it was
>> resolved that they shouldn't because supposedly authors may not
>> understand that 'transparent' is shorthand for 'transparent-black'.
>> The reasoning behind this resolution is ill founded.
>>
>
> I agree. It's interesting that they are still using
> non-premultiplied colors.

FF16+ does one better. It supports _un-prefixed_ gradients using 
non-premultiplied colors.

<!DOCTYPE html>

<style type="text/css" media="screen">
div {
   border: 1em solid #555;
   padding: 1em;
   background: linear-gradient(to right, rgba(255,0,255,0), 
rgba(255,255,0,1) 50%, rgba(255,0,255,0)), linear-gradient(to right, 
white, white 50%, black 50%, black);
}

</style>

<div>Gradients using non-premultiplied colors</div>



>>> Dino: benefit of pre-mul is you don't gray when animating to
>>> transparent. And can solve it by going to rgb(...)
>>>
>>
>> You do *NOT* go to gray with pre-mul unless the initial color is
>> white or somewhere between white and black (within the grayscale).
>>
>
> No, you can go to gray if for any of the interpolated values, r/g/b
> become approximately the same value.

As Dino said "you don't go gray when animating to transparent." He 
referring to the grayish (or less saturated color) midpoints when going 
from color to transparent black. This is most noticeable when composite 
on a whitish backgrounds.

<!DOCTYPE html>

<style type="text/css" media="screen">
div {
   border: 0.25em solid #555;
   padding: 1em;
   background: linear-gradient(to right, white, transparent);
}
</style>

<div>Gradients using non-premultiplied colors</div>


This was always the main issue. When animating or transitioning from one 
color to another color where one of the colors was transparent-black.


Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Friday, 1 February 2013 03:00:55 UTC