Decorating type using CSS

Add some grunge and other text effects on your web designs! Here's some simple ideas for decorating type using pattern images. Background color of the example images is set to yellow to show clearly the transparent areas.

See the Khmerang.com article on Worn text CSS for more information on this CSS technique.

Worn Text Pattern 1

Worn pattern example Worn pattern image made of just text color and transparent pixels.

Worn Text Pattern 2

Worn pattern example Worn pattern using text color, background color and transparent.

Worn Text Pattern 3

Worn pattern example Worn pattern using just background color and transparent.

Striped Text

Fade pattern example Some stripes look quite fancy as well!

Striped Text 2

Fade pattern example Or the stripes could be horizontal for a screenline-effect.

Metallic Text

Metallic pattern example Metallic pattern using 24-bit png-image. Too bad IE-users will have to wait for version 7 for this to work.

TV Noise

Metallic pattern example Going a bit nuts you could add animated gifs, for example to create this disturbing white noise pattern.

See the Khmerang.com article on Worn text CSS for more information on this CSS technique.