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/