W3C home > Mailing lists > Public > www-style@w3.org > August 2013

Re: [css-images] cross-fade() interpolation and syntax

From: Dirk Schulze <dschulze@adobe.com>
Date: Sat, 17 Aug 2013 15:06:12 -0700
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
Message-ID: <89CFBBEC-D6BB-402B-93A6-4F83F704EF93@adobe.com>

On Aug 17, 2013, at 8:01 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Sat, Aug 17, 2013 at 6:12 AM, Dirk Schulze <dschulze@adobe.com> wrote:
>> Hi,
>> I have a question to the syntax (1) and interpolation (2) of the cross-fade image function.
>> 1) The currently specified syntax of the CSS Image function cross-fade() is[1]:
>>        cross-fade( <percentage>? <image> [, <image> | <color> ]? )
>> while WebKit and Blink use:
>>        cross-fade(<image>, <image>, <percentage> | <number>)
>> WebKit and Blink do not have optional arguments and do not support fallback colors. While fallback colors are certainly a good idea, I think the general syntax currently used in WebKit (and in a previous state of the spec?) looks more logical. Of course this is a matter of opinion, but maybe worth a discussion.
> WebKit and Blink implemented the old grammar - we changed it a while ago.
> I think there are good arguments for the current grammar.  For one,
> the old grammar only allowed fading to a color by using "image(color)"
> to generate a solid-color image.  That's bad, because the size of the
> color-image is the image positioning area, which is probably different
> from the size of the source image, which would cause an annoying size
> change as you interpolated.  I think this is an important use-case so
> people can fade to "transparent" to simply "fade out" an image.  The
> new syntax's ability to take a color directly solves this by not
> changing the size of the source image.

A solution for that could be the syntax of 'fill' and 'stroke'. The current syntax seems just to support interpolation from image to color, but not color to image.

Something like cross-fade(<image> <color>?, <image> <color>?, <percentage> | <number>) would be more powerful.

> The new grammar's defaulting behavior also makes that "fade out"
> behavior trivial - you just leave off the second argument.  That seems
> pretty useful.

But what about fade in?

> Finally, the new grammar is extensible to fading between more than two
> images - we can just change the grammar to:
> cross-fade( [<percentage>? <image>]# [, <image> | <color> ]? )

Well, you could simple nest them.

> and then normalize the percentages if they add up to more than 100%.
>> 2) The interpolation of cross-fade is specified by:
>> ""If both the starting and ending images are cross-fade()s which differ only by by their <percentage>, they must be interpolated by interpolating their <percentage>. Otherwise, they must be interpolated as generic <image>s.""[2]
>> typo: s/by by/by/
>> The question is what "differ only by by their <percentage>" means. Following animation example (WebKit/Blink syntax) with
>> from:
>>        cross-fade(url(1.png), cross-fade(url(1.png), url(2.png), 20%), 0%);
>> and to:
>>        cross-fade(url(1.png), cross-fade(url(1.png), url(2.png), 80%), 0%);
>> The second image argument is a cross-fade image function as well, that just differs on the percentage. Are these images considered to be different? So does the implementation need to fallback to generic <image> fading for the whole value? Speaking as an implementer I would be in favor for that, but I am not sure if that is the intention of the specification text. The same for other generated images like linear-gradient and radial-gradient that might have different color offsets. Maybe a little example in the spec could help to clarify that.
> I can go either way.  As currently written, the spec rules out fancy
> interpolation for your example - you'd have to fall back to simple
> <image> interpolation.
> However, we could change it so that when interpolating two
> cross-fade()s, you interpolate the percentage *and* each source image.
> This would have identical behavior for the case the spec already
> covers, but would also opt your example into fancy interpolation as
> well.

I wouldn't fight for the fancy animation :)

>> PS: I really like the paragraph symbol next to the headlines in the spec. I think that is really useful.
> Automatic feature of Bikeshed, yet another inducement to switch
> yourself over.  ^_^

Always to your service ;)


> ~TJ
Received on Saturday, 17 August 2013 22:07:50 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:33 UTC