2003Fahrner Image Replacement ⚓
<h3 class="fahrner">
<span>CSS-Tricks</span>
</h3>
CSS-Tricks
Notes
2003Radu Darvas Technique
<h3 class="radu">
CSS-Tricks
</h3>
CSS-Tricks
Notes
- Requires browser to render a gigantic box (a real box model box) so not good if you need to use background-color or border or whatever.
2003Phark Method ⚓
<h3 class="phark">
CSS-Tricks
</h3>
Phark Method
Notes
- Very likely the most widely used method.
- Requires browser to render a very large box (likely an insignificant performance problem, but possibly on older devices like iPad 1).
- Problematic in RTL situations (or anywhere text-align isn't left).
2003 Radu Darvas Shim ⚓
<h3 class="radu-shim">
<img src="blank.gif" alt="CSS-Tricks">
<span>CSS-Tricks</span>
</h3>
CSS-Tricks
Notes
- Requires bogus non-semantic image.
- One of the only technique that solves the CSS On / Images Off situation.
2003 Leahy / Langridge ⚓
<h3 class="leahy">
CSS-Tricks
</h3>
CSS-Tricks
2003 Leon Dwyer Method
<h3 class="leon">
<span>CSS-Tricks</span>
</h3>
CSS-Tricks
Notes
2003 Gilder/Levin Technique ⚓
<h3 class="levin">
<span></span>CSS-Tricks
</h3>
CSS-Tricks
Notes
- Requires bogus span.
- Transparency problems. Logo would need to be completely opaque to cover text.
2003 The Lindsay Method ⚓
<h3 class="russ">
CSS-Tricks
</h3>
CSS-Tricks
2003 Shea Enhancement ⚓
<h3 class="shea" title="CSS-Tricks">
<span></span>CSS-Tricks
</h3>
CSS-Tricks
Notes
- Adds title attribute for rollover popup like inline images have.
- Requires image to be completely opaque, or will show text behind.
2005 Malarkey Image Replacement ⚓
<h3 class="mir">
CSS-Tricks
</h3>
CSS-Tricks
Notes
- Requires hacky CSS stuff for some older browsers.
2006 Nash Image Replacement ⚓
<h3 class="nir">
CSS-Tricks
</h3>
CSS-Tricks
Notes
- Pseudo elements only IE 8 and up.
- The other technique that solves CSS On / Images Off scenario.
2007 Yet Another Image Replacement Method ⚓
<h3 class="yairm">
CSS-Tricks
</h3>
CSS-Tricks
2008 Phark with Inline Image
<h3 class="phark2">
<img src="test.png" alt="CSS-Tricks" />
</h3>
Notes
- Unsure if alt text of image is 1) good enough accessibility-wise or 2) As effective SEO wise as text inside a header tag.
2010 Improved NIR ⚓
<h3 class="nir">
CSS-Tricks
</h3>
CSS-Tricks
Notes
- Enhancements to NIR: prevents some edge case weirdness.
2012 Scott Kellum Method ⚓
<h3 class="skm">
CSS-Tricks
</h3>
CSS-Tricks
2012 H5BP Image Replacement ⚓
<h3 class="h5bp">
CSS-Tricks
</h3>
CSS-Tricks
Notes
- The validator incorrectly reports as invalid CSS, but behavior is consistent across all browsers.