Re: [css3-images] Gradients feedback

On 11/09/2010 3:55 AM, Boris Zbarsky wrote:
> On 9/10/10 3:35 AM, Alan Gresley wrote:
>>>> or to been non-premultiplied but this would
>>>> mean that all colors (points) within sRGB space that are gradients to
>>>> transparent would have to be somewhat non-premultiplied. I don't know
>>>> how this can be done.
>>>
>>> I have no idea what you're trying to say there.
>>
>> What I mean is that all colors (points) within sRGB space that are
>> gradients to transparent and are over a white background would be appear
>> the same as if the same colors (points) within sRGB space were a
>> gradient to white (opaque).
>
> Ah, I see.
>
> Well, for a gradient from rgba(r, g, b, 1) to transparent which is then
> composited on an rgba(255, 255, 255, 1) background, we get these results
> in the final composited image at position 0 < t < 1 in the gradient:
>
> Unpremultiplied interpolation:
>
> rgb(r*(1-t)^2 + t*255,
> g*(1-t)^2 + t*255,
> b*(1-t)^2 + t*255)
>
> Premultiplied interpolation:
>
> rgb(r*(1-t) + t*255,
> g*(1-t) + t*255,
> b*(1-t) + t*255);
>
> As it happens, the latter is exactly what you would get for a gradient
> to opaque white. This seems like a good thing to me.

So if the effect is that of what you would get if a gradient was from 
opaque color to opaque color, then why do you need to have any 
transparency at all?

<!DOCTYPE html>
<style type="text/css">
html, body { margin: 0; background: white;}
#test1 {
   background: -webkit-linear-gradient(left, blue, white, red);
   background: -moz-linear-gradient(left, blue , white, red);
   background: -ms-linear-gradient(left, blue , white, red);
   background: -o-linear-gradient(left, blue , white, red);
}
#test2 {
   background: -webkit-linear-gradient(left, blue, rgba(0,0,255,0) 50%, 
rgba(255,0,0,0) 50%, red);
   background: -moz-linear-gradient(left, blue, rgba(0,0,255,0) 50%, 
rgba(255,0,0,0) 50%, red);
   background: -ms-linear-gradient(left, blue, rgba(0,0,255,0) 50%, 
rgba(255,0,0,0) 50%, red);
   background: -o-linear-gradient(left, blue, rgba(0,0,255,0) 50%, 
rgba(255,0,0,0) 50%, red);
}
div {height: 40px;}
</style>
<div id="test1"></div>
<div id="test2"></div>

Why justify the use of 'transparent' where 'white' will achieve the same 
gradient?

This does show that the background-color and the final composite color 
is important. If it was not, I would have not be having this debate or 
discussion.

>>> Again, no. The current midway point is rgba(0, 0, 127, 0.5).
>>> Compositing that onto a white background gives #7f7fbe, which is what
>>> you seem to have measured with your color picker.
>>
>>
>> No, I didn't use a color picker for any of the midway points.
>
> Then how did you come out with opaque midway points for a gradient to
> _transparent_?

When you asked this question last year, I completely walked away from 
this part of the thread.

The answer to your question (how ?) is the same answer that I will give 
you now. It came intuitively. Yes, I knew the midway point intuitively.

What I didn't understand intuitively was that 'transparent' was really 
transparent-black. When Tab finally stated this, all my previous 
experimentation made sense. Any gradient from yellow to any other color 
point formed by the triangle of yellow, white and black if opaque or 
fully transparent ranging on a background that is a gray-scale of white 
to black will show a composite color within the same triangle where all 
color points are of the hue of yellow.

So yellow / rbga(255,255,0,1) to rbga(0,0,0,0) has a midway point of 
rbga(127,127,0,0.5). 1.5 times the values for each channel of RGB is 
rgb(191,191,127) which is the midway point when composite on a white 
background.

This can be done for any transparent-color point.

rbga(255,255,0,1) to rbga(0,0,255,0) has a midway point of 
rbga(127,127,127,0.5). 1.5 times the values for each color channel is 
rgb(191,191,191) which is the midway point when composite on a white 
background.

rbga(255,255,0,1) to rbga(0,127,255,0) has a midway point of 
rbga(127,191,127,0.5). 1.5 times the values for each color channel is 
rgb(191,223,191) which is the midway point when composite on a white 
background.

Also for a black background.

rbga(255,0,0,1) to rbga(255,255,255,0) has a midway point of 
rbga(255,127,127,0.5). 2 divided the values for each color channel is 
rgb(127,63,63) which is the midway point when composite on a black 
background.

rbga(255,0,0,1) to rbga(255,255,255,0) has a midway point of 
rbga(255,127,127,0.5). 2 divided the values for each color channel is 
rgb(191,95,95) which is the midway point when composite on a black 
background.

I know understand that my intuitive midway picking was due to having 
some form of awareness of sRGB cubed space.

>>> Nothing about the _gradient_ changes. All that changes is what it's
>>> composited against. Given that you made this observation, I'm not sure
>>> how you can claim with a straight face that the intermediate gradient
>>> colors are "fully opaque".
>>
>> What you think is a semi-opaque color can only be conceptualized when
>> such semi-opaque colors have a background (not uniformed) that reveals
>> transparency.
>
> Well, obviously. That's the whole idea of transparency, yes. But if
> we're doing a gradient to transparent, we care about exactly that, yes?

All I have seem to have understood is that the whole rational coming 
from particular quarters is of three gradients all tested on a white 
background. They are:

1. yellow --> transparent

2. white --> transparent

3. blue --> transparent --> red


You don't seem to see what I see and it seems you are fixed on the 
concept that a midway point is dirty. The language of the spec has 
soften somewhat but I still read this in example 21 of 5.4.

http://dev.w3.org/csswg/css3-images/#color-stop-syntax

   | In premultiplied space, transitions to or from
   | "transparent" always look nice.

This infers that the reverse is true for un-premultiplied gradients.

   | In un-premultiplied space, transitions to or from
   | "transparent" always look *not nice*.

I have seen the words dirty, ugly, and other descriptive words for a 
midway point that is not nice.

This is not a rational.




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

Received on Tuesday, 11 October 2011 00:39:28 UTC