A couple of months ago, we posted a blog post on bringing blending to the web. Since then, Nikos Andronikos from Canon and I have been busy integrating feedback in the draft spec and we presented it to the CSS working group in May.
At Google I/O Vincent Hardy also gave an overview of the capabilities. If you’re interested, you can watch it here. (The part on blending and compositing starts around 55min.) The WebKit build he is using is also publicly available so you can experiment with these features.
We’re still looking for feedback so let us know if you have any ideas to improve the spec or if you see features that we missed!
The blog post got some great feedback and resulted in a couple of new features that we incorporated into the spec. This post will go over these new features:
The first blog post only talked about blending between HTML elements. However, the CSS box model and the CSS3 background spec define a stack of content and sometimes you want to blend within this stack.
For instance, you might want to blend the color of a text element with its background image:
The CSS syntax would look like:
background: linear-gradient(to right, #00a9e0 0%,#323290 20%,
#ea1688 40%, #eb2e2e 60%,#fde92e 80%,#009e54 100%);
‘foreground-blend-mode’ specifies the blending of the text or nested elements. To specify blending for background images, we introduced ‘background-blend-mode‘ which takes a list of blending modes. Each item in that list corresponds to a background image.
Currently, CSS box shadows and text shadows are drawn on top of the background which is not always desired. Alpha can be used to work around this but it will make the drop shadow look washed out and produce artifacts. Most authoring applications give you the ability to blend the shadow because it produces a more pleasing effect.
If we remove the opacity and apply a ‘multiply’ blend mode, we get the following result:
Notice how the color of the shadow changes depending on the background. In the opacity case, the border of the green shadow gets a bit darker. This side effect is gone as well.
The CSS syntax would look like:
text-shadow: green 20px 54px;
Up until the last blog post, we were only thinking of adding blending features to CSS. Someone replied that we should make it part of canvas as well which sounded like a great idea.
As you might know, canvas already supports the compositing operators but not blending. If people want to get blending behavior today, they have to either do it manually which is slow and uses a lot of memory, or use prerendered bitmaps which is not as flexible.
We proposed two different solutions:
- Extend ‘globalCompositeOperation’ with blending keywords
- Introduce a new keyword ‘globalBlendOperation’ that sets the current blend mode
The proposal to extend the ‘globalCompositeOperation’ will most likely be accepted since it is powerful enough and easy to implement.
We looked at the architecture of WebKit and Mozilla to see how difficult it would be to implement this. It turns out that they already have all the code in place so we were able to create a prototype in a couple of hours. (Unfortunately, those builds are not available publicly yet.)
you would write the following code:
var ctx = $("#canvas").getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.arc(75, 75, 50, 0, Math.PI*2, true);
ctx.globalCompositeOperation = ‘screen’;
ctx.fillStyle = "#00FF00";
ctx.arc(125, 75, 50, 0, Math.PI*2, true);
What is Next for the Blending Specification?
Once Nikos and I incorporate all the feedback, we are going to request to progress the spec to “working draft” which will cause more scrutiny on all the features we’re introducing. Fortunately, blending and compositing do not cause content reflow which makes it a lot less controversial.
While we push the spec forward, we will also work on integrating this feature into several browsers so you can start using it.
Let us know what you think!