W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css4-images] non-premultiplied gradients and in the wild

From: Alan Gresley <alan@css-class.com>
Date: Thu, 30 Aug 2012 18:09:40 +1000
Message-ID: <503F1FC4.7090408@css-class.com>
To: Rik Cabanier <cabanier@gmail.com>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 30/08/2012 3:47 AM, Rik Cabanier wrote:

[snip]


>> With every single reason why non-premultiplied gradients were rejected, I
>> was able to show how it could be done with slightly different syntax.
>>
>>
>> To have a gradient from 'transparent' to 'yellow' and have the midway
>> point as ##FFFF79 (light yellow), all an author needs to do is use
>> transparent-yellow to yellow.
>>
>>    linear-gradient(rgba(255,255,**0,0), rgba(255,255,0,1))
>>
>>
>> To use 'transparent' as a midway point between two colors, all an author
>> needs to do is repeat the transparent part two times at 50% (i.e. red to
>> transparent-red against transparent-blue to blue)
>>
>>    linear-gradient(rgba(255,0,0,**1), rgba(255,0,0,0) 50%, rgba(0,0,255,0)
>> 50%, rgba(0,0,255,1))
>>
>
> Correct.
> Special casing 'transparent' so it does this under the hood would be much
> better. I'm unsure if we can change it at this point, although there are
> probably few people that rely on this...

See here.

http://www.google.com.au/#hl=en&q=CSS+gradient+with+transparency


First hit.

http://stackoverflow.com/questions/2293910/css3-transparency-gradient

Example:

/* webkit example */
background-image: -webkit-gradient(
   linear, left top, left bottom, from(rgba(50,50,50,0.8)),
   to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);



Second hit.

http://stackoverflow.com/questions/4480919/can-you-create-gradients-that-fade-to-opacity-using-css-or-javascript

Example:

-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 
1)), to(rgba(0, 0, 0, 0)));


One of my demos.

http://css-class.com/test/css/3/gradients/radial-gradients-repeat1.htm

The result (Gecko and WebKit on left and Opera on the right).

http://css-class.com/test/temp/color-transparent-gs.png


As I see it, it hijacking the keyword 'transparent' to represent all 12 
million plus transparent-color points. This is why I did suggest 
'pre-transparent' as an alternative.


> Maybe if we add support for interpolation in Lab or the linear colorspace,
> we can ask to skip premultiplication.


I would like this resolved in simple rgba.


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 30 August 2012 08:10:12 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:59 GMT