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

Re: [css4-images] custom blending effects

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 24 Nov 2011 19:36:52 -0800
Message-ID: <CAAWBYDD0gBr_9vbouJkg7TrpG0a=QG+-2PXtMfE0cy3m-j0Y6w@mail.gmail.com>
To: Dean Jackson <dino@apple.com>
Cc: www-style list <www-style@w3.org>
On Thu, Nov 24, 2011 at 7:25 PM, Dean Jackson <dino@apple.com> wrote:
> On 25/11/2011, at 2:07 PM, Tab Atkins Jr. wrote:
>> On Thu, Nov 24, 2011 at 3:13 PM, Dean Jackson <dino@apple.com> wrote:
>>> This is a completely half-baked proposal, but I figured it was ok to embarrass myself on this list rather than forget about the idea. This is definitely not a proposal from Apple as a whole. Just one fool mumbling in public.
>>>
>>> The cross-fade() function is going to be extremely useful. However, cross-fading is one of many blending operations [*]. IIRC SMPTE (and the larger SMIL spec) list a set of predefined functions like wipe, iris, dissolve, etc.
>>>
>>> [*] The terminology is going to be confusing. Typically such operations are called 'transitions' but that term already has a meaning in CSS. Obviously 'blending' here isn't the same operation as you typically associate with compositing and Photoshop-like effects. We're just talking about moving from one image to another image over time.
>>>
>>> I wonder if we should add another operation to CSS 4 images that allows more blending operations. My suggestion would be to allow a CSS Shader with three hard-coded inputs (like cross-fade): image1, image2 and amount of blend (0 - 1). This would allow for some pretty snazzy effects.
>>>
>>> cross-fade would just be the special/common case of e.g. image-blend(crossfade, image1, image2, 0.4)
>>>
>>> [1] Here's the SMIL set of predefined transitions: http://www.w3.org/TR/2005/REC-SMIL2-20050107/smil-transitions.html
>>
>> Is there any advantage to doing this rather than just using a shader
>> directly, with the normal shader syntax?
>
> Just syntax, in the same way cross-fade is a shorthand for an effect.
>
> You're right in that authors could get the result using background-image: filter(url("image1.png", custom(url("page-curl.vs") url("page-curl.fs"), 20 20, destination-image url("image2.png"), amount 0.4);
>
> Without shaders you could still imagine a set of built-in effects, such as iris, wipe, star-wars-style-wipe-with-fuzzy-edge...

Oof, I didn't think about the fact that custom shaders have a pretty
nasty syntax due to their total generality.

Okay, that seems pretty reasonable to me.

~TJ
Received on Friday, 25 November 2011 03:37:48 GMT

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