Adding texture to your text with text masking

CSS3 also gives you the awesome power of adding an image mask texture to your text with an image. This effect was previously only achievable by creating a static image of your text with an image-editing software.

Getting ready

You'll need an image to use as the texture mask. Using an image-editing software, create a new image with an alpha channel. If you do not have an image-editing software that can create a PNG with alpha channels, you can download an open source, free image-editing software GIMP at http://www.gimp.org. To create a quick texture effect, use a scatter-type brush to create a textured area near the top of the image.

Save it as a PNG image type, preserving the alpha channel, in the images ...

Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.