CSS Mask-Image & Text

I recently wrote about Controlling Web Typography and focused on CSS pseudo selectors & down-to-the-letter control. As a web designer, I want the same level of control over type that print designers have, including texture. There are currently 2 webkit CSS properties that I’ve grown to love and hope gain more traction & browser support. My favorite would have to be background-clip:text, but it currently degrades poorly. A close second is mask-image, which you can apply to text.

In the example below I’ve implemented a subtle grey flecked texture effect over the white text. Hover over the box to see how it will degrade in non-supporting browsers. The texture simply won’t show up until (fingers crossed) the property is supported by all browsers.

Dinero

Is not spanish for dinner

Here’s the CSS code with all the structural bits trimmed out:

.mask-box h3, .mask-box p{
	-webkit-mask-image: url(/path/to/mask.png);
	-o-mask-image: url(/path/to/mask.png);
	-moz-mask-image: url(/path/to/mask.png);
	mask-image:  url(/path/to/mask.png);
	text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);}

In most cases, I prefer subtle amounts of texture / graphic applied to text. The best example of a well used mask-image for type I’ve ever seen is this event page designed by Matthew Smith of Squared Eye and built by Michael Meyer. The “A Night for Adoption” headline is selectable and it’s got rays of sun shining through. Magical!

webkit mask image example

As you use and join the chorus to get CSS3 properties more widely accepted, don’t forget about background-clip:text and mask-image. When these properties are combined with web fonts, enhanced CSS pseudo selectors, and CSS transforms, we’ll soon be all out of reasons to resort to image replacement for beautiful type on the web.

40 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Antonio Capuozzo

    Useful as always dude!

  • Blake

    Nice work here. I’ve been thinking about ways to do this and didn’t know about mask-image. Pretty rad! I like the idea of having a small png to add texture like this, but I’m wondering if there’s a way to combine it with something like Noisy http://rappdaniel.com/noisy/ to get a similar effect without using any images. (provided you want noise and not flecks :)) Thanks!

  • David Hund

    Cool effect. Seems better supported (and more future proof) than -webkit-background-clip: text; http://valuedstandards.com/static/test/clip.html

  • Trent

    @Blake: Not a bad idea—Noisy integration could be pretty neat.
    @David Hund: Yup. To me, background-clip:text; is much more intuitive from a design standpoint because you don’t have to think about transparency, but its future seems uncertain. I’d love to see a better solution. Regardless of how it’s handled, I bet the property would get a lot of use.

  • Melanie Richards

    This post makes me really excited about where web design & development is headed. Strange in a way that we crave more sophisticated technology in order to duplicate the design flexibility of old media onto newer media.

  • Ronny

    I’m totally with you Trent, I dunno what takes other browser vendors so long to implement this.
    The creative possibilities of this, along with proper use of shadows and gradients, are astounding. Thanks for pushing this forward :-)

  • Davor

    I have just recently finished working on a website and this is what I needed to make it perfect. Thanks Trent! :)

  • Jeff

    “... we’ll soon be all out of reasons to resort to image replacement for beautiful type on the web.”

    Last remaining reason: Internet Explorer?!?

    How long will it take for Microsoft to even support “text-shadow” for crying out loud ... .

  • Rob H

    Thanks for sharing these tips. These are some useful CSS properties which I look forward to using. Its a shame that not all browsers support CSS3 yet, hopefully its not to far away. Its good that if a browser don’t support the property, it simply won’t show. Unlike some properties, e.g. CSS3 gradient shows some nasty grey colour if its not supported. Thanks again for sharing your tips.

  • Barry Reynolds

    That is awesome, will be using those effect from now on. Hopefully IE6 supports them.

  • matt

    great simple little article, but definitely some awesome results. thanks !

  • Jon Howard

    good article .. css3 ... mmmmmm

  • Lars Gunther

    Have yoy tried making the same effects in Firefox using SVG filters on HTML?

    https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content

  • Mau

    I tested the Mike Meyer website in IE8 and half the heading text was missing. Since IE8 is not so very old there should always be a fallback for this in my opinion. (I always tell my clients to forget about IE but these damn visitors...)

  • Rob Crowther

    You can do similar tricks with SVG in other browsers (IE9, Opera and Firefox) and they still work in WebKit too:

    http://www.boogdesign.com/examples/svg/pattern-fill.svg

    http://www.boogdesign.com/examples/svg/heading-fill.html

  • KMS

    wowie! loving this so much. thank u again!

  • Nevin

    This is really cool. I’m going to give it a try.

  • Richard - Accessibleweb

    Very nice effect. Don’t forget to check that colour contrast isn’t adversely affected enough to make the text inaccessible.

  • Stjepan

    Thanks, I did not know that this was possible. I have something to play with now :)

  • Anthony

    Ok, so what am I doing wrong? I’m trying this in Safari and it’s not working!

  • Trent

    @Anthony: Does your .png image have some transparency happening?

  • Eric Rasch

    I’ve been raking my brain today to get this to work with text-shadow. Every time I apply a text-shadow to the tag (in my a case a H1), the text shadow sits on top of the masked image. I tried changing the z-index, tried apply a span tag and such, but nothing seems to solve that.

    Did you happen to run into that issue as well?

  • Trent

    @Eric Rasch: I’ve not yet, though I noticed the mask also seems to be applied to the text-shadow. I’d love to see your example... maybe link it up or throw it on jsfiddle?

  • Eric Rasch

    @Trent: Here’s the jsfiddle: http://jsfiddle.net/ericrasch/bTsyX/. Thanks for taking a look at it. I was able to duplicate the ‘shadow in front issue’ on @David Hund’s example above.

  • Kartik Iyer

    Hi Trent,
    The text masking tut was real fabulous for the soul reason I was in pursuit of exactly what you’ve done in this article. Yet, just to let you know, I had certain issues with viewing your image masked text. The mask text is sunning fine on Chrome (Webkit Browser) but is not showing up on Firefox (Gecko Browser). The issue persists even though I’ve got the latest version of Firefox. Please see into the issue and let me know. Thanks. :)

  • Trent

    @Kartik Iyer: Unfortunately, this property is only support by Webkit browsers at the moment. You should still use it though because it degrades gracefully. Non-supporting browsers will display text just fine, only without the masked image.

  • Lucas

    Strange, but in my Firefox 9.0.1 it won’t work :(

  • ry

    that would be because firefox isn’t a webkit browser. webkit is chrome and safari.

  • ry

    On a vaguely related note - There is actually a bunch of debate at the moment surrounding other browsers planned implementation of the -webkit- vendor tag, but that is a horrible idea for a number of reasons. It is also an entirely different can of worms.

    Stuff like this is fun for experimenting with, or for adding a bit of vajazzle for users with suitably webkit-flavoured browsers, but until it’s not worth factoring it’s use in at a design stage.

  • Mochamad Gufron

    Nice share bro. Keep it up. I’m trying kind of this and i see your post, it’s helpful.

  • Thomas Vanhoutte

    I wish we could ban IE8 and other browsers that do not fully support these features. Thanks for the tip, but for now I will use other methods to achieve the design I want. Regards

  • Ola

    Any ideas on how to “retinaify” a mask image?

  • Trent

    @Ola: Not really. I’d love a mask-image-size sort of thing though.

  • Jay Kay

    The link to “A Night for Adoption” is broken. Is there a working link, or does someone perhaps have the page archived?

  • Digital Dreams

    From Now goodbye to Photo editing software for this kind of subtle thing

  • Andrew Reston

    This is great for using with typography next to logos to match the brand guidelines rather than using a jpeg, thanks.

  • Mohamed Taher

    how come no one ever noticed , that this will never work on moz this way ?! you have to use svg mask i guess :/

  • Milk

    There seems to be an issue with the demo site/domain.

  • Milk

    Er, I mean with Michael Meyers site!

  • Mike Adams

    Always had issues with matching guidelines for branding text next to logo. This could solve it I think.

Leave a Reply