Выводим дату при помощи спрайтов

На сайте LearningjQuery.com реализован очень интересный вывод даты для каждого поста.

Вертикальное расположение года и гарнитура шрифта говорят нам о том, что для достижения данного эффекта были использованы изображения. Следует отметить, что информация о дате, как и положено, представлена в виде текста.

Разметка без стилей:

Зайдя в Firebug, мы увидим, что все предельно просто.

Добавляем спрайты

Очевидно, что для каждой даты не требуется свое уникальное изображение. Даты образуются при помощи одного простого изображения (css спрайты), которое состоит из трех полей: 1-е поле - день недели , 2-е поле – текущий месяц и 3-е поле - год.

Взгляните на эту красоту:

HTML

Окончательный HTML:

<div class="postdate">
<div class="month m-06">Jun</div>
<div class="day d-30">30</div>
<div class="year y-2009">2009</div>

Мы имеем обертку и три блока. Это дает нам возможность реализовать следующую схему:

Чтобы добиться того же результата для CMS типа WordPress или для вашего персонального движка, код должен выглядеть следующим образом:

<div class="postdate">
<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>

<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>

CSS

Основная работа со спрайтами начинается именно в CSS. Задав особые названия классов в HTML, мы можем выбирать, какую часть изображения использовать.

Сперва позиционируем относительно элемент-родитель. Затем внутри элемента-родителя абсолютно позиционируем каждый из трех блоков. Каждый из трех блоков будет использовать одно и то же фоновое изображение, соответственно его им и прописываем. Далее каждому блоку устанавливаем соответствующую высоту и ширину и выводим текст (свойство text-indent) за пределы страницы.

Наконец снабжаем каждый месяц (12 вариантов), день (31 вариант) и год (заканчивается по прошествии 10 лет) своей уникальной фоновой позицией, которая понадобится нам для вывода даты.

.postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(/wp-content/themes/ljq/images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...

.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...

.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...

Готово!

Источник