W3C home > Mailing lists > Public > www-style@w3.org > June 2011

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

From: Alan Gresley <alan@css-class.com>
Date: Tue, 28 Jun 2011 14:57:20 +1000
Message-ID: <4E095F30.8010507@css-class.com>
To: "L. David Baron" <dbaron@dbaron.org>
CC: fantasai <fantasai.lists@inkedblade.net>, www-style@w3.org, Tantek Çelik <tantek@cs.stanford.edu>
On 28/06/2011 3:52 AM, L. David Baron wrote:
> On Monday 2011-06-27 13:46 -0400, fantasai wrote:
>> On 01/12/2011 12:26 PM, Tab Atkins Jr. wrote:
>>>
>>> What you're seeing is the fact that transitions from opaque colors to
>>> transparent in non-premultiplied space get darker as they progress.
>>> Try doing a transition from opaque white to transparent over a white
>>> background, and you'll see it very clearly - you'll get an image that
>>> starts white, darkens to gray, and then lightens to white again.
>>
>> Is there a way to avoid things like this? It seems to me that having
>> 'transparent' mean 'transparent black' means you almost never get what
>> you want, which is the opacity fading without the color itself changing.
>> I think that's a common enough use case that it should be easy to do.
>
> The way to avoid it is to transition in premultiplied space instead.
> (Gecko does this for transitions, but not yet for gradients.)
>
> -David


Why imposed solutions on authors when authors are quite capable of 
transiting from <color> to full alpha transparency by using 
background-size and background-position with gradients (a 
background-image), and _not_ need to be concerned with any _pollution of 
color_. The below test transitions quite well in Chrome, Firefox 5 and 
WebKit nightlies.


<!doctype html>

<style type="text/css">
body { background: #222 }
div {
   height: 100px;
   margin: 50px;
   background: white -webkit-linear-gradient(left, rgb(112, 0, 112) 0%, 
rgba(112, 0, 112, 0) 50%, rgba(0, 112, 0, 0) 50%, rgb(0, 112, 0) 100%);
   background: white -moz-linear-gradient(left, rgb(112, 0, 112) 0%, 
rgba(112, 0, 112, 0) 50%, rgba(0, 112, 0, 0) 50%, rgb(0, 112, 0) 100%);
   background: white -ms-linear-gradient(left, rgb(112, 0, 112) 0%, 
rgba(112, 0, 112, 0) 50%, rgba(0, 112, 0, 0) 50%, rgb(0, 112, 0) 100%);
   background: white -o-linear-gradient(left, rgb(112, 0, 112) 0%, 
rgba(112, 0, 112, 0) 50%, rgba(0, 112, 0, 0) 50%, rgb(0, 112, 0) 100%);
   background-size: 200% 100%;
   -webkit-transition: all 2s linear;
   -moz-transition: all 2s linear;
   -ms-transition: all 2s linear;
   -o-transition: all 2s linear;
}
div:hover {
   background-position: 100%;
}
</style>

<div>hover me</div>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Tuesday, 28 June 2011 04:57:49 GMT

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