Ricky Synnot

On using text to mask an image

April 23, 2014

A few years ago I saw a poster with a great little date lockup, where the text masked the shape, allowing the background image to come through.

Poster shot full

Specifically this part caught my eye:

Poster shot crop

I had always wondered how to achieve this using straightforward CSS.  I made many attempts, but could never arrive at a simple solution that didnt rely on fairly complicated SVG’s, and they couldn’t be executed on the fly.

Until I stubled across this great site by Chris Wang on Typewolf.

Screen Shot 2014-04-22 at 1.59.18 pm

A quick browser inspection revealed the trick to achieve this feature:

-webkit-background-clip: text;

If we hide this feature, the underlying image is revealed.  Really neat execution, which allows you to employ the style of any web font you like!

Screen Shot 2014-04-22 at 2.00.38 pm

Now obviously I’m not the first to think of this, or blog about it as Divya has done, but I thought it would be a great thing to share.

Divya is a revered CSS guru, and has published a fantastic article outlining the technique.  As has Chris Coyier.

Must now find an opportunity to use this in the wild!