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 10:10:09 +1000
Message-ID: <4E091BE1.608@css-class.com>
To: fantasai <fantasai.lists@inkedblade.net>
CC: www-style@w3.org, Tantek Çelik <tantek@cs.stanford.edu>
On 28/06/2011 3:46 AM, 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.

It is easy to do. You can simply change the alpha component.

For a color close to purple.

<!doctype html>

<style type="text/css">
body { background: white }
div {
   height: 100px;
   background: -webkit-linear-gradient(left, rgb(112, 0, 112), rgba(112, 
0, 112, 0));
   background: -moz-linear-gradient(left, rgb(112, 0, 112), rgba(112, 0, 
112, 0));
   background: -ms-linear-gradient(left, rgb(112, 0, 112), rgba(112, 0, 
112, 0));
   background: -o-linear-gradient(left, rgb(112, 0, 112), rgba(112, 0, 
112, 0));
}
</style>

<div></div>


For white, you transition it to 'transparent white'.

   linear-gradient(white, rgba(255, 255, 255, 0))



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Tuesday, 28 June 2011 00:10:38 GMT

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