W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Blending Modes as part of the Color module?

From: Matthew Wilcox <elvendil@gmail.com>
Date: Sun, 8 Jan 2012 18:11:38 +0000
Message-Id: <F641CCC9-67AF-40B4-B724-7959B2364D6C@gmail.com>
To: "www-style@w3.org Style" <www-style@w3.org>
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 GMT

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