If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes. An Amazon search returns many books and a Google search on ‘photoshop blending tutorial’ returns more than 200,000 results. This points to a very widely known and used feature.
If you’re unfamiliar with blend modes, they are a set of operators that determine how 2 layers are blended together.
The following example shows the normal case where two images are combined with no blending:
There is no interaction between the gradient and the image.
By using the ‘overlay’ blend mode, we can make the gradient interact with the image of the DJ like this:
By using this blend mode, the colors of the image of the DJ are recalculated such that the lightness or the darkness of the background gradient is preserved.
Last year, I joined the W3C and started contributing to the SVG and FX task forces. I am now spending the bulk of my time on editing, discussing and implementing the CSS compositing and blending spec. You can find a very early draft here.
There already was a draft spec that described how to accomplish this in SVG, but there was no adoption in the major browsers. The FX task force, which oversees rendering features that overlap SVG and HTML, wanted a spec so blending and composting applies to all HTML elements, not just SVG. Our intent is to publish the spec through the W3C process and implement it in WebKit. If there is demand, we could potentially add it to the canvas specification as well.
The hardest part of writing this spec is not how to define the new proposed properties since this is well understood and done before (eg in SVG and PDF); it is how you can explain it so anyone can understand what it does and how it is supposed to work.
In today’s blog, I’m only going to cover how you can specify a blend mode.
The new draft will introduce a new CSS property: ‘blend-mode’ that takes the following values:
<div style="background: url('gradient.jpg');"> <img style="blend-mode: overlay;" src="url('dj.jpg')"/>
blend-mode is applied, it interacts with every element that is rendered behind the element on which the blending mode is specified. In this example, anything that is behind the image will blend with it, not just the parent
div with the image background.
A couple of weeks ago, our team got together in San Francisco for a hackathon and we tried to implement this in WebKit. I expected that we wouldn’t get very far, but lo and behold, it took us only a couple of hours to get something up and running.
The reason we could do it this fast was that CoreImage already supports these blend modes. In combination with our experience in shaders, we were able to hook this up and get GPU accelerated blending to work in our prototype. Unfortunately, the code we wrote for the hackathon is not of a shippable quality (which is why you won’t see it soon in a Webkit Nightly), but the fact that we could it so quickly is very encouraging. We are planning on showing the prototype and the draft spec to the W3C in May and if our proposal is accepted, we will contribute it to WebKit in the near future.
The cool thing about CSS blend modes is that you can not just apply them to simple HTML elements but also to SVG content, video or elements with CSS animations or transitions.
My next blog post will go a bit deeper over the syntax and will show more examples.
In the mean time, I’d love to hear your comments!