Rip it up: Worn Type using CSS

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.


Khmerangs Worn Type CSS TrickKhmerang.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.

As you may have already figured, there are a few caveats to consider.

  1. The text is still selectable, but it’s more difficult than usual. Selecting within the heading is next to impossible. Still, most other IR methods have no prospect of ever allowing text selection, so this technique is already a step up on those.
  2. You would need to choose a big, beefy font with a large surface area to get a worthwhile effect. Judging from a few quick tests, lighter weight fonts mostly came out looking a bit  grubby.
  3. The method requires some slightly mucky markup — <h2><span></span>Worn Text</h2> — so if you’re a stickler for semantics, you best avoid this method.

Nevertheless, it certainly provides a very distinctive result, and while it’s not likely to be the sort of trick you would use on project after project, looks like a useful addition to the armoury.

Nice Work.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.igeek.info asp_funda

    That’s a pretty cool trick!! :) No more dependance on nasty CSS filters which work in one browser & doesn’t in another!! ;)

  • http://www.redflystudios.com Cianuro

    Nice tip! Great to see something that works everywhere.

  • http://www.errewf.it RaS!

    OMG! This is a cool tips!

  • http://www.designity.nl peach

    sIFR is perfectly selectable though

  • http://www.phpnerds.com petesmc

    Nice, but the text isn’t selectable. Quite annoying.

  • http://www.lowter.com charmedlover

    Sadly it isn’t working in Opera. :(

  • hdsol

    Cool trick. Another way to achive some desired effects

  • http://www.igeek.info asp_funda

    @peach:

    sIFR is perfectly selectable though

    sFIR & this hack are completely different. With this you can just apply some effect to your text or photos(sFIR is text only) without relying on any Javascript or 3rd party plugin, while sFIR is purely intended for text replacement and it can’t do text effects, you can just use a custom font to display text in. Besides, sFIR depends on Flash and is not intended to be used quite a lot in a single page else the browser might become a bit sluggish or crash.

    @petesmc:

    Nice, but the text isn’t selectable. Quite annoying.

    well, incase you missed it, this problem is mentioned at the bottom of the article as a quirk due to the positioning of the image. But if you start by selecting from the character before the effect, you can select the whole effected area just fine & copy as well. Then its just a matter of pasting & removing that extra character or two from the beginning. :)

  • Anonymously

    Ah… Dam!

  • http://www.jonhehir.com Young Twig

    Nifty. :)

  • http://www.howtomastercss.com Sergeant

    doesn’t seem to work in opera

  • thorbergdt

    Thats sweet thanks for the insight!

  • http://www.propelpages.com spinball

    Cool. Ads a great look and can still be crawled, unlike an image.

  • Kaystarmaker

    well, incase you missed it, this problem is mentioned at the bottom of the article as a quirk due to the positioning of the image. But if you start by selecting from the character before the effect, you can select the whole effected area just fine & copy as well. Then its just a matter of pasting & removing that extra character or two from the beginning.

    but thats something not all users know ;) and if you want to keep your site from confusing users, you dont want text to be un-selectable…

  • Lira

    Sadly it isn’t working in Opera. :(

    It seems to work against a white background: it works in this example and here as well. However it’s true that it doesn’t work where the original poster intended to.

  • http://www.dustindiaz.com polvero

    For those feeling the need to compare sifr and worn-type…i’m sure there’s a way you can just combine the two…giving sifr presedense, then if that is not available, show the worn-type method as a fall back :)

  • http://www.igeek.info asp_funda

    @Kaystarmaker:

    but thats something not all users know

    its not rocket science, they can get around by trying & selecting a wider area. the worst that can happen IMHO is that they’ll start selecting from quite a bit more characters earlier instead of 2-3.

    and if you want to keep your site from confusing users, you dont want text to be un-selectable

    I agree, but then as I see it, this thing will be used for headlines etc. only, not something people usually need to select!! ;)

    besides, the point here is just to show off that its possible & practical to a lot of extent!! :)

  • nemanja_nq

    Nice trick

  • http://www.sitepoint.com Matthew Magain

    Oooh, I can feel it coming. No, it’s not is it? Oh my god, it is! Yes! Another big long sIFR debate that goes on and on and gets nowhere! Arrgh! I can’t escape them!

    Nice effect. I agree that original CSS techniques are few and far between these days.

  • shikaab

    Thats sweet thanks for the insight!

    Oooh, I can feel it coming. No, it’s not is it? Oh my god, it is! Yes! Another big long sIFR debate that goes on and on and gets nowhere! Arrgh! I can’t escape them!

    Nice effect. I agree that original CSS techniques are few and far between these days.

  • Sojan80

    Oddly enough though I have found that using the Select All property on the right click menu does select the title text. I still think it is a neat trick, and one that I may use myself someday….

  • http://www.sitepoint.com Matthew Magain

    @Sojan80: not sure why that is odd behaviour. It works for me too, as I would expect it to.

  • Pingback: Indirect Manipulation » Blog Archive » How To Be Clear

  • Pingback: // chapi:de / » Grunge Look per CSS

  • DEVlady

    It does work fine in Opera.

  • Pingback: Designers who Blog: Design, Illustration, Photography, Web, Advertising, Branding …