[css4-images] custom blending effects

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

Dean

Received on Thursday, 24 November 2011 23:13:42 UTC