Proof of concept: does it blend?

I created a proof of concept to see how far I could go in recreating Edenspiekermann’s Utrecht City Theatre logo's blending effects (like an image editor's layer blend mode).

UPDATED: 2014-12-29

It makes use of a proposed new feature: photoshop like blending modes. It's not exactly the same as the original work (as that uses a custom made typeface) but the idea behind it works. Alignment of the characters (with their flipped versions) is rather tricky. It also depends on what font is used and the colour of the background.

More about the custom typeface on fontfeed. It also explains this effect wasn't as much about blending as it was about different superimposed shapes.

In an image editor (Photoshop, Acorn, Pixelmator etc) I could recreate this using 2 layers of the text:

  1. The brownish version that is flipped vertically
  2. The white layer on top with layer blending mode set to linear dodge

Now, linear dodge is one of those modes that have been left out of the CSS blending mode 'spec'. To recreate the effect though, I needed 3 layers (not counting the background):

  1. the brownish mirrored (or 180 degrees rotated) text
  2. the semi transparent grey version of the text
  3. the blended layer showing the overlapping parts of the other 2 layers by mix-blend-mode set to 'overlay'

example

HTML

<div id="testword">
    <span class="wordmark flipV stad">stadsschouwburg</span>
</div>
<hr>
<span class="wordmark flipV stad coloured">stadsschouwburg</span>
<hr>

Tested and working: Safari 8 Mac, Chrome 39.0.2171.95 with flag 'experimental web platform features' enabled.

Have a look below or here: poc.nirusu.me/utrecht

Blending