Blending Modes as part of the Color module?

Hi,

I've searched through the archives but have only been able to find reference to Blending Modes inthe CSS4 images module? Have I missed something or is this the only case where blending modes have been considered?

I’d been thinking about how that’d need to be implemented, and I think it’d have to be as part of the CSS Colour Module, as well as having a stand-alone property. My use cases were:

Blend a whole element
img { blending-mode: multiply; }

This would be nice, but proberbly not used all that often. It’d work well for image effects or headings, but it’d be pretty useless on things like image captions - you’d still want the text to be readable which means you proberbly don’t want written content to have a blending mode applied unless you can be sure the underlying image will be suitable.

Blend parts of an element
div { background-color : rgba(0,0,0,.5) multiply; border: 3px solid rgba(255,255,255,.5) screen; color : #fff; }

Basically, wherever you specify a colour or an image, you should be able to specify a blending mode to apply too. In this case, we want the div’s background to multiply but we want the div’s border to screen so that it pops out visually. The text is solid white with no blending applied. You could imagine the same context revesed for headings:

h2 { text-shadow : rgba(0,0,0,.5) multiply; color: rgba(255,255,255,.5) screen; }

Where the shadow multiplies (today’s shadows can sometimes be lighter than the background they’re on!) but the text screens (ensuring it’s brighter than whatever is behind it).

Received on Sunday, 8 January 2012 18:12:07 UTC