W3C home > Mailing lists > Public > www-style@w3.org > April 2016

Re: [css-images] Negative implications of linear gradient color space choice in CSS

From: Florian Rivoal <florian@rivoal.net>
Date: Tue, 12 Apr 2016 11:36:17 +0900
Cc: Mark Straver <mark@wolfbeast.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Rik Cabanier <cabanier@gmail.com>, Xidorn Quan <quanxunzhen@gmail.com>, Simon Fraser <smfr@me.com>, www-style list <www-style@w3.org>
Message-Id: <B392A244-30A2-4CD8-991F-56C0B229A1C9@rivoal.net>
To: Sebastian Zartner <sebastianzartner@gmail.com>

> On Apr 10, 2016, at 21:45, Sebastian Zartner <sebastianzartner@gmail.com> wrote:
> On 9 April 2016 at 02:17, Mark Straver <mark@wolfbeast.com> wrote:
>> Hey Folks,
>> On 09/04/2016 01:12, Sebastian Zartner wrote:
>>>> This has multiple, significant effects on animation, too.
>>>> "transparent" is no longer an animatable value (impossible to smoothly
>>>> move from it to any other color), so any gradient using "transparent"
>>>> stops being animatable too. To make it animatable, you have to
>>>> manually put in the two RGBA steps, which means you have to double-up
>>>> that step for any other gradient you're animating with this one.
>>> The same rules for gradient color transitions apply to animations. So
>>> it would still be animatable.
>>> Reusing the example from above the transtion between the colors would
>>> be rgba(255,0,0,1) @ 0% -> rgba(255,0,0,0) @ 50% -> rgba(0,0,255,0) @
>>> 50% -> rgba(0,0,255,1) @ 100% for an animation like this:
>> [snip]
>> I think Tab's main objection is that a transparent stop itself (especially
>> when "in the middle") would be more difficult to animate to another
>> (not-transparent) color because it would influence the surrounding gradients
>> rather sharply.
> Note that I was talking about animating plain colors, not gradients.
> Of course animating gradients requires more math when 'transparent' is
> special-cased, though it isn't that complicated either.

While I see the potential benefit of making transparent magic, I am not entirely sure how you'd animate. If the author is asking for an animation from linear-gradient(red, white ,blue) to linear-gradient(red, transparent, blue), what do you do?

Something like the following steps?

linear-gradient(red, rgba(255,255,255,1), blue) /*(red, white ,blue)*/
linear-gradient(red, rgba(255,255,255,0), blue)
linear-gradient(red, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 50%, blue)
linear-gradient(red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue) /*(red, "magic" transparent, blue)*/

 - Florian
Received on Tuesday, 12 April 2016 02:36:47 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:02 UTC