Summit 7 Blogs

Mask image and the timely death of text image replacement

Mask-image is a very versatile CSS property that can produce some really neat effects (image borders, transparency effects, neat hover transitions; the list goes on). But here, I want to demonstrate how it brings the demise of image text replacement tantalizingly close, even for complex logos. Let's look at a fantastic image which, let's imagine, could be a logo of some kind :

Actually it's not an image. It is generated by simple HTML. It's deliberately hideous, but it is makes a point about some of the powerful effects we can apply to textual elements, without ever having to resort to Photoshop.

Let's look at the code:



The real magic is the CSS that takes this plain text and makes it shine.

Here are the key features:

  • It's real text.

Search engines see it, screen readers read it: it's accessible and lightweight. Imagine if you wanted to use a complex, stylish image such as this as the heading for each page of a site. The production work would be massive and ongoing - not to mention the bandwidth (a major concern once more in the mobile arena) to download large, pin-sharp images.

Embed it with @font-face, if you need to - or use a more normal font. But why confine yourself to already-existing fonts? Take your company logo, save it as an SVG and create an embeddable font. Now, instead of maintaining an asset library with several size/color variations of your company logo, just type a character, choose a size a color and you're done: infinite scalability and endless flexibility.

  • It has a trippy skew effect, created using the CSS3 skew property.
  • It has rounded corners (but what doesn't these days?), making use of the border-radius property.
  • It has a faded, grainy brush effect.

This last feature is the mask-image. It is actually a tiny, transparent PNG file. It could be anything though: a texture, a pattern, a half-tone pattern, a sunburst, anything with some contrast. The positioning and scaling options for the mask image are the same as for the more familiar background-image property. As such, we can set a mask-size, a mask-repeat and a mask-position attribute. Here, I'm  using "mask-repeat:repeat" (which is, in any case, the default setting). Forthcoming functionality (confined to WebKit for now) includes better integration with SVGs, which is where things will get really interesting.

Every major browser including IE9+ supports mask-image, so what are you waiting for?