Re: [CSS3-color] [css3-images] [css3-transitions] transparent transitions

On 12/07/2011 6:23 AM, Brian Manthos wrote:
> Alan Gresley:
>> What I am an trying to say is that a very large percentage of
>> potential gradient transitions will never work if all gradients are
>> forced to transition in premultiplied space.
>>
>> Please view this test in Firefox 5, IE10 preview 2 or a WebKit
>> nightly. http://css-class.com/test/temp/color-transparent.htm Now
>> please view the same test in Opera 11.50.
>>
>> Here are the screenshot for non Opera 11.50 UAs.
>> http://css-class.com/test/temp/color-transparent.png
>>
>> Here are the screenshot for Opera 11.50.
>> http://css-class.com/test/temp/color-transparent-opera11-50.png
>
> I know it's not exactly what you want, but see what you think of this
> (in Opera 11.50): background-image: -o- linear-gradient(left,
> transparent, rgba(0,0,255,0.2) 10%, yellow, rgba(0,0,255,0.2) 90%,
> transparent);
>
> ... in place of ... background-image: -o-linear-gradient(left,
> rgba(0,0,255,0.0), yellow, rgba(0,0,255,0.0));
>
> -Brian


The test of gradients where I have screenshots of the ones with yellow 
were not a test to show desirable gradients with transparent color 
points but rather showing the magnitude of such gradients that are 
ruined when transitioned is done in premultiplied space.

The test had only six end points of color (yellow, blue, fuchsia, lime, 
aqua, red) but it could have included the other two points of color in 
the gamut of sRGB colorspace. Each series of test had eight start points 
of transparent color (transparent-white, transparent-yellow, 
transparent-blue, transparent-fuchsia, transparent-lime, 
transparent-aqua, transparent-red, transparent-black). If I was also to 
introduce the midpoints of each of these eight color points (along the 
outside edges of sRGB space, excluding center gray), there are 12 extra 
color points. This is so far a total of 20 color points and 20 
transparent color points. Not even adding the variations with multiple 
layered gradients, 20 times 20 equals 400 potential gradients.

Opera 11.50 will only show 20 gradients in total and all these gradients 
has a shifting of salutation of color along the gradient path.

Below is a more suitable test. It has layered gradients (both of which 
end with a transparent color point). Opera 11.50 shows this shifting of 
salutation of color, thus why there is to much yellow. Take note that 
the beginning and ending points of the final layer are -25% and 125% 
respectfully.


<!DOCTYPE html>

<style type="text/css">

body {background: #000; margin: 0; padding: 50px; }

div {
   background-color: white;
   height: 300px;
   background-image:
   -webkit-linear-gradient(top left, yellow -25%, rgba(0,255,0,0.0) 125%),
   -webkit-linear-gradient(top, rgba(0,255,0,0.0) 0%, rgba(0,127,255,1) 
100%);
   background-image:
   -moz-linear-gradient(top left, yellow -25%, rgba(0,255,0,0.0) 125%),
   -moz-linear-gradient(top, rgba(0,255,0,0.0) 0%, rgba(0,127,255,1) 100%);
   background-image:
   -ms-linear-gradient(top left, yellow -25%, rgba(0,255,0,0.0) 125%),
   -ms-linear-gradient(top, rgba(0,255,0,0.0) 0%, rgba(0,127,255,1) 100%);
   background-image:
   -o-linear-gradient(top left, yellow -25%, rgba(0,255,0,0.0) 125%),
   -o-linear-gradient(top, rgba(0,255,0,0.0) 0%, rgba(0,127,255,1) 100%);
}

</style>

<div></div>



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

Received on Monday, 25 July 2011 02:42:43 UTC