Textured Typeography with CSS3

Let's suppose I have a textual element that serves as a title and I don't want it to be a plain boring flat color. CSS3 has a nifty way of letting an image serve as a mask for an element.

Let's take an image with some texture to it, say, the Lava effect from Gimp:

We can apply this to an element using the mask-image property:

.title {
    -webkit-mask-image:  url(http://mitch.amiano.agilemarkup.com/images/titlemask2.png); 
-o-mask-image: url(http://mitch.amiano.agilemarkup.com/images/titlemask2.png); 
-moz-mask-image: url(http://mitch.amiano.agilemarkup.com/images/titlemask2.png); 
mask-image: url(http://mitch.amiano.agilemarkup.com/images/titlemask2.png); 
}

This gives us:

Textured Text

Wherever the image mask is fully opaque, the original element content shows, and wherever it is fully transparent, the original element content is occluded. Between opaque and transparent, bits in the mask will show(or hide) content to the degree that they are partially opaque(or transparent).