Adobe engineer Mihai ic has written on the Adobe Web Platform Team blog about CSS background blend modes now being available in Chrome Canary and WebKit Nightly.
Using the CSS property background-blend-mode, you can blend background images with an underlying background colour, as specified by the Compositing and Blending Level 1 draft specification released earlier this month. This follows more general canvas blending that landed in Firefox, WebKit and Chrome earlier this year.
Blend modes will be familiar to anyone who’s worked with layers in a graphics package such as Photoshop, and the draft spec includes 16 blend modes, including multiply, screen and overlay.
The spec is part of a wider attempt to bring more graphical layout richness to web design. Earlier this week we reported on CSS Shapes, which web developer Peter Gasston said would “have quite an impact on the way we work, allowing for more rich, print-influenced layouts”.
CSS Masking Level 1 also made it to draft with co-editors from Adobe, Mozilla and Google. That spec provides the means for partially or fully hiding elements via masking or clipping.
There have also been attempts to bring more magazine-like text controls to the web. But although Adobe’s text-balancing proposal went down well, designers have been cautious.
Designer Laura Kalbag recently told .net she “applaud[ed] the effort to make text on the web easier to read,” because “this most important goal is often forgotten in favour of the latest fancy CSS magic”, but she was unconvinced about attempts to replicate some aspects of print design: “Why would we want to replicate a print experience that was created because of the material restrictions — trying to squeeze more words on to less paper — when we don't have the same material restrictions on the web?”
The inference is clear: more power for web designers when it comes to layout control is a good thing, but it should be used to bolster innovation as the web continues to evolve rather than bringing outdated restrictions to a medium that doesn’t need it.
