Демонстрация спрайтов

by webref

HTML

<ul>
  <li><a href="#"><span class="bold">Жирный текст</span></a></li>
  <li><a href="#"><span class="italic">Курсивный текст</span></a></li>
  <li><a href="#"><span class="underline">Подчёркнутый текст</span></a></li>
  <li><a href="#"><span class="size">Размер текста</span></a></li>
  <li><a href="#"><span class="bullet">Маркированный список</span></a></li>
  <li><a href="#"><span class="number">Нумерованный список</span></a></li>
  <li><a href="#"><span class="quote">Цитата</span></a></li>
  <li><a href="#"><span class="left">Выравнивание по левому краю</span></a></li>
  <li><a href="#"><span class="center">Выравнивание по центру</span></a></li>
  <li><a href="#"><span class="right">Выравнивание по правому краю</span></a></li>
</ul>

CSS

li {
  float: left;
  list-style: none;
  margin: 2px;
}
li a {
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  padding: 3px;
}
li a:hover {
  border-color: #999;
}
li span {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/sprite.png") 0 0 no-repeat;
  color: transparent;
  display: block;
  font: 0/0 a;
  height: 16px;
  width: 16px;
}
.italic {
  background-position: -16px 0;
}
.underline {
  background-position: -32px 0;
}
.size {
  background-position: -48px 0;
}
.bullet {
  background-position: -64px 0;
}
.number {
  background-position: -80px 0;
}
.quote {
  background-position: -96px 0;
}
.left {
  background-position: -112px 0;
}
.center {
  background-position: -128px 0;
}
.right {
  background-position: -144px 0;
}