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

Re: Blending Modes as part of the Color module?

From: Rik Cabanier <cabanier@gmail.com>
Date: Sun, 8 Jan 2012 21:20:44 -0800
Message-ID: <CAGN7qDBr2JG=ZLk6L2qwb9rV+jA5MtF2vCQkGAgCkAGTOBCpfA@mail.gmail.com>
To: Matthew Wilcox <elvendil@gmail.com>
Cc: "www-style@w3.org Style" <www-style@w3.org>
Hi,

I made a proposal to move the SVG blending modes to HTML as well. (I
think you will find it in the FX mailing list.)

I think the main stumbling block will be the calculation of background
since few (none?) of the browsers currently implements this.

Rik

On 1/8/12, Matthew Wilcox <elvendil@gmail.com> wrote:
> 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 Monday, 9 January 2012 10:52:38 GMT

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