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.


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

Leave a Reply