CSS3 wish-list: blending modes
We can do some nice stuff in CSS these days, hurrah for opacity, rgba, box-shadow and the gang. It’s still pretty limiting in some ways though, and I’ve often craved for blending modes, like we use in Photoshop. There have been a number of times over the last few years where I’ve been handed a visual design to implement as a website, and found it impossible because the design in question would need CSS to have Blending Modes. So I’ve 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. Here are my use-cases with expected syntax:
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 th 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. 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).
Note: this post is really old (five or six months old) and I never published it. I still like the idea, but I am aware that blending modes have now been suggested by Adobe. I don’t know if they’re as fine-tuned as this or not - I’ve not seen the spec yet.
Entry Information
- Posted:
- Sun, 8th Jan 2012 at 17:01 UTC
- Filed under:
- Tags:
Comments
skip to comment formWe've introduced a draft spec that proposes this.
Please let us know if it looks reasonable. We're looking for feedback.