- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 28 Jun 2011 14:57:20 +1000
- 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 UTC