a collection of image replacement techniques

image_replacement.css

.old_and_lulz {
  text-indent: -9999999999999999999999999999999999999999999999999999px; /* lol */
}

.more_solid_but_still_weird {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}

.le-37-signals-ir {
  width: 100px; /* width */
  height: 0;
  padding-top: 50px; /* height */
  display: inline-block;
  overflow: hidden;
  background: url(images/image.png); /* lol this is a non generic generic class */
}

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.i-like-this-one {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
} /* http://nicolasgallagher.com/another-css-image-replacement-technique/ */


.the-previous-updated-and-adopted-by-h5bp {
  border:0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
} /* https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7/ <- good read */