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.
As you may have already figured, there are a few caveats to consider.
- 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.
- 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.
- 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.
December 20th, 2005 at 4:20 am
That’s a pretty cool trick!! :) No more dependance on nasty CSS filters which work in one browser & doesn’t in another!! ;)
December 20th, 2005 at 4:22 am
Nice tip! Great to see something that works everywhere.
December 20th, 2005 at 5:33 am
OMG! This is a cool tips!
December 20th, 2005 at 7:01 am
sIFR is perfectly selectable though
December 20th, 2005 at 7:24 am
Nice, but the text isn’t selectable. Quite annoying.
December 20th, 2005 at 8:51 am
Sadly it isn’t working in Opera. :(
December 20th, 2005 at 10:31 am
Cool trick. Another way to achive some desired effects
December 20th, 2005 at 10:34 am
@peach:
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:
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. :)
December 20th, 2005 at 10:46 am
Ah… Dam!
December 20th, 2005 at 11:34 am
Nifty. :)
December 20th, 2005 at 11:54 am
doesn’t seem to work in opera
December 20th, 2005 at 12:17 pm
Thats sweet thanks for the insight!
December 20th, 2005 at 12:29 pm
Cool. Ads a great look and can still be crawled, unlike an image.
December 20th, 2005 at 12:50 pm
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…
December 20th, 2005 at 2:31 pm
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.
December 20th, 2005 at 3:04 pm
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 :)
December 20th, 2005 at 3:11 pm
@Kaystarmaker:
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.
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!! :)
December 20th, 2005 at 6:06 pm
Nice trick
December 20th, 2005 at 6:48 pm
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.
December 21st, 2005 at 3:17 am
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.
December 21st, 2005 at 9:11 am
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….
December 21st, 2005 at 6:19 pm
@Sojan80: not sure why that is odd behaviour. It works for me too, as I would expect it to.
December 22nd, 2005 at 10:21 am
[…] Speaking of CSS, here’s a link to some neat stuff you can do. And check out these guys, who float an image over the text to make it look weathered. […]
December 22nd, 2005 at 1:02 pm
[…] Gefunden über sitepoint.com […]
December 28th, 2005 at 1:44 am
It does work fine in Opera.
December 29th, 2005 at 11:54 pm
[…] Pixel Perfect, SitePoint’s Web Design Blog Thursday December 29th 2005, 10:54 pm Filed under: Design, Web Standards, Web, Interface design, Interaction design […]