Bruce Lawson

• Home
• Bruce's music
• who is this wanker?
• snapshots
• writing stuff

This is test page for CSS 3 image replacement.

This page uses no img elements. It is plain text, using CSS 3 to do image replacement.

The HTML is simply

 <h1>Bruce Lawson</h1>
 <ul>
        <li><a id="home" href="/index.php/">Home</a></li>
        <li><a id="music" href="/index.php/category/my-music/">Bruce's music</a></li>
        <li><a id="about" href="/index.php/about/"> who is this wanker? </a></li>
        <li><a id="photos" href="/plogger/"> snapshots</a></li>
        <li><a id="writing" href="/index.php/writing/">writing stuff</a></li>
</ul>

Therefore, this is perfectly accessible to screenreaders, and search engines need not suspect blackhat techniques in which text is hidden from humans. There is no requirement for extra non-semantic span elements to hang images from.

CSS

The CSS that does the magic uses the content property to replace the content of an arbitary element. At the time of writing (August 2008) this works only in Opera and Safari. (Safari fails to honour the text-align:center on the h1 but will honour margins.)

h1 {content:url(http://www.brucelawson.co.uk/punk-images/bruce-logo.jpg);
    text-align:center;}