by Alex Walker

With so much recent experimental focus on DOM scripting, it feels like years since I’ve seen anything genuinely new in plain, old CSS. That was until today at least.

Khmerang.com has published a great little article explaining how they achieved the grungy, weathered look on their headings. No, it’s not sIFR and it’s not even traditional Image Replacement. It is, in fact, a clever variation on Tom Gilder and Levin Alexander’s ‘old skool’ IR technique, which advocated floating an opaque image layer over your text, rather than the much more common method of just shunting the original text right out of the viewport (i.e. ‘text-indent:-1000em’).

Khmerang’s new take on the idea is to swap the image layer with a mostly transparent, distressed pattern, leaving the underlying heading text with a scratched and worn finish.

The really nice bit is the pattern repeats, but will rarely ever align itself identically with the same letter, so every character should appear to be a one-off original.