Proof of concept: does it blend?

UPDATED: 2014-12-29

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).

example

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'

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

Have a look: http://poc.nirusu.me/utrecht

Fallback

Just noticed that if the :after element doesn’t have an opacity set to 1 it will be the same as the :before element and sort of looks like the intended result, just a little opaque, a desaturated version. No blend mode needed.