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