CSS mask-image – My New Favourite Thing

Last week, whilst working on a site design for a forthcoming web typography conference [ooh get me], I thought it would be nice to add a texture overlay to the main heading type.

I was sure I had seen this done before and it turns out there are two ways of doing it, both supported by Webkit only at this time.

Attempt 1: Using ‘background-clip:text’

This effect can be achieved fairly easily by using background-clip:text [outlined here]. It works as expected in Chrome & Safari but in Firefox it doesn’t degrade gracefully. The text becomes invisible and there is no way of using a feature detection script as the property background-clip is supported by Firefox, I just doesn’t support the value :text.

Attempt 2: Using ‘mask-image’

Then I remembered  Trent Walton’s Article from last year, which if I had bothered reading properly, instead of just wowing at the pretty examples, I would have already learned not to bother with attempt one. Mask-image worked very nicely and degraded properly and was less code than the other approach.

Don’t ever do this, but you can apply it to EVERYTHING! Heres the code:

-webkit-mask-image: url(/img/fleck-texture.png);
-o-mask-image: url(/img/fleck-texture.png);
-moz-mask-image: url(/img/fleck-texture.png);
mask-image: url(/img/fleck-texture.png);

Even iframes:

There are however a few of unpleasant side-effects at the time of writing:

  • It messes up the text aliasing a bit.
  • You can’t override it on certain elements.
  • It breaks some stuff, like my social media menu at the top right of this page [further investigation needed].

 

More posts

Comments

  1. Eric Breuers

    Thanks for this! I’m more of a ‘grunge’ developer and I had no idea this even existed until I saw the mask-image declaration used in a WordPress theme.

    I can’t wait for this to be introduced to other browsers!

    Best regards,
    Eric