Открыть меню    

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

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

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

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

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

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

дата без css стилей

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

разметка html

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

Очевидно, что для каждой даты не требуется свое уникальное изображение. Даты образуются при помощи одного простого изображения (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 ...

Готово!

Источник

Комментарии к статье