Malarkey Image Replacement (MIR) tests

There is a detailed tutorial available on how this page was created and a link to my examples page.

Starting off

I wanted to experiment with some interesting (to me) header styles, so I started with this <h1>...

And All That Malarkey

And then added some styling,

<h1 class="h1">And All That Malarkey</h1>
h1 {font-size:500%; letter-spacing:-.1em; text-transform:lowercase; color:#333;}

Which made,

And All That Malarkey

Then by mistake, I added a large amount of negative letter-spacing with em units... see the header below? No? That's because it's effectively disappeared from view. I like to think of this now as the black hole effect, where the letter-spacing is sooooo great, that the element effectively collapses in on itself.

<h1 class="mir">And All That Malarkey</h1>
.mir { letter-spacing : -1000em; }

I've put a grey border around it in case you thought I was cheating...
(border:1px solid #ccc;).

And All That Malarkey

See? It's vanished into the far reaches of the universe. Oooooh, what happens if we now replace the text with a background image?

And All That Malarkey

Well, bugger me! It works!

Except no... Opera is not playing ball, sooooo let's try a simple be nice to Opera hack and then hide that hack from MacIE. Thanks to Robert Jan Verkade for the MacIE fix.

.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */

Th, th, th, that's all folks!

There is a detailed tutorial available on how this page was created.

By the way, these images ain't fo stealin'.