[css3-image] gradients from color to full alpha transparency (was Re: [CSS3] support for linear-gradients & radial-gradients)

CC www-style.

On 25/06/2011 5:58 AM, Brian Manthos wrote:
> Not enough context.  What was the original issue?
> -Brian

The original issue was that gradients from <color> to 'transparent' look 
black-ish (dirty or ugly) in the middle when transitioned in multiplied 
(non-premultiplied) space [1] (see bottom of message). This developed 
quickly into a quick discussion between Tab and Boris about the 
mathematics [2]. I come along and say that there is a precise maths in 
color [3].

(Please note that Boris' maths is what you would expect from someone 
from MIT where my simple maths is that of sRGB color-space when 
represented as a X, Y, Z matrix - not to be confused with x, y, z 
floating points of monochromatic color)

I added later in some thread that the black-ish (dirty or ugly) midpoint 
of such gradients are what one would expect when composite over light 
backgrounds. It became largely a debate between Tab and I which lasted 
for months until his reply this year [4] which is the message which I 
replied to two nights ago. During the initial discussions CIE 
colorspace, sGRB, scRGB, monochromatic color and CSS3 color was also a 
hot topic for discussion [5].

The crux of the propose change is that <color> to 'transparent' will not 
behave as <color> to rgba(0,0,0,0) (the current behavior of 1E10, Gecko, 
WebKit and Opera) but from <color> to rgba(255,255,255,0) which is the 
behavior that IE10 has for such gradients. Also the current gradient 
from <color> to rgba(0,0,0,0) are supposed to be changed, thus my half 
life gradient scaling.

Now out in the web development community, gradients of all natures have 
become the cool new feature of CSS3 and some of the demonstrations have 
been with gradients from <color> to 'transparent'. In May this year, 
Divya Manian gave a presentation at Web Directions in Seattle where in 
part, she discusses this demonstration (please view in Firefox 5 or WebKit).

http://nimbu.in/unplugged/demos/gradient.html

Now this is one of the gradients affects that will be affected when the 
change happens in other browsers for gradients from <color> to 
'transparent'.

<!doctype html>

<style type="text/css">
div {
   width: 800px;
   height: 100px;
   background: black -webkit-linear-gradient(left, indianred, transparent);
   background: black -moz-linear-gradient(left, indianred, transparent);
   background: black -ms-linear-gradient(left, indianred, transparent);
   background: black -o-linear-gradient(left, indianred, transparent);
}
</style>

<div></div>


The simple solution is this.

<!doctype html>

<style type="text/css">
div {
   width: 800px;
   height: 100px;
   background: black -webkit-linear-gradient(left, indianred, 
rgba(0,0,0,0));
   background: black -moz-linear-gradient(left, indianred, rgba(0,0,0,0));
   background: black -ms-linear-gradient(left, indianred, rgba(0,0,0,0));
   background: black -o-linear-gradient(left, indianred, rgba(0,0,0,0));
}
</style>

<div></div>


According to what I been told on this list, the above behavior of the 
above gradient should not work like that, thus my half life gradient 
scaling. I don't know why an author should have to convert indianred (or 
any other keyword color) to rgb color 'rgb(205,92,92)' and use the 
scaling (below) to achieve such a gradient which won't be the same since 
I have scaled down to rgb(3,1,1) using uneven scaling steps.

linear-gradient(left, indianred, rgba(102,46,46,0.5) 50%, 
rgba(51,23,23,0.25) 75%, rgba(25,11,11,0.125) 87.5%, rgba(12,5,5,0.0625) 
93.75%, rgba(6,2,2,0.03125) 96.875%, rgba(3,1,1,0.015625) 98.4375%, 
rgba(0,0,0,0))



[1] http://lists.w3.org/Archives/Public/www-style/2010Aug/0587.html
[2] http://lists.w3.org/Archives/Public/www-style/2010Aug/0590.html
[3] http://lists.w3.org/Archives/Public/www-style/2010Aug/0594.html
[4] http://lists.w3.org/Archives/Public/www-style/2011Feb/0282.html
[5] http://lists.w3.org/Archives/Public/www-style/2010Sep/thread.html#msg313



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

Received on Sunday, 26 June 2011 11:42:04 UTC