Верстка инфографики кофе

Доброе утро тем, кто только проснулся и может быть еще медитирует за чашкой ароматного крепкого кофе. Если у вас сейчас не утро, а день/вечер/ночь, то вас скорее всего просто заинтересовала тематика.

И так, статья рассчитана на новичков, занимающихся веб-строительством. И в ней пойдет речь о верстке в HTML изображения чашки кофе.

Вот такие пироги. Пример верстки под катом.

Пример
Для того, чтобы посмотреть пример верстки, отправьте твит об этой статье(просто нажмите на ссылку «отправьте» и кнопка «Пример» станет активной.).

Допустим к вам в руки попадает такая картинка, которую вы хотите сверстать. С чего же начать?

1 шаг. Подготовка изображения в PhotoShop

Начинаем с разметки изображения в PhotoShop. Выделяем с помощью направляющих границы предполагаемых элементов в HTML. И в итоге должно получится что-то типа этого.

Сам PSD файл также можно скачать.

2 шаг. Шаблон HTML документа

Быстрее всего начать верстать документ можно, если начать с готового шаблона из HTML и CSS файлов. В сети существует достаточное множество фреймворков, но мы будем использовать только обнуление стилей элементов от Эрика Мейера.

3 шаг. Верстка

Приступаем к основам.

Столом для чашки кофе будет элемент DIV с классом main, мы его разместим по середине экрана. Далее сама чашка — элемент DIV с классом cup. Заголовок оформляется тэгом H2, а транскрипция тэгом H3. Ручка — элемент DIV с классом pen. Дымок — элемент DIV с классом steam и тарелка — элемент DIV с классом saucer. Про тарелку отдельно ниже.

Далее наполнение чашки — элемент DIV с классом content. Слои кофе выполнены через список UL с классом layers. В нем каждый элемент LI — это слой со своим наполнением, объемом и цветом.
В итоге, получилось вот так:

Дополнение. Наверное, любознательный читатель по своему сделал бы HTML разметку. Например, более компактнее имена классов (надеемся вам стало понятно, почему, через классы, а не через id) или, например, чашки не через элементы DIV, а с помощью списка, ну и так далее. Напоминаем вам, что цель статьи не сделать самую оптимальную верстку, а показать новичкам ее основы.

4 шаг. Стили

Стилизация достаточно проста. Вы можете посмотреть ее в примере. Остановимся на интересных моментах.

Чашка

Присутствуют стили из CSS3, отвечающие за закругления чашки.

Ручка чашки

Тоже самое для ручки.

Дымок

Дымок представлен тремя элементами с классом col. Каждая струйка дымка представлена тремя HTML элементами и двумя псевдо-элементами. В стилях все те же закругления из CSS3. Отметим лишь изменение цвета дымка при наведении курсором мыши на чашку.
Выполнено это вот так:

Слои наполнения

Отметим, что с последним слоем (который самый нижний) пришлось повозится. Он никак не хотел прятаться в чашку, и было решено у этого слоя также закруглить края.
Выполнено это было так:

Толщина слоев была выполнена через классы h10, h20, h30 и т.д. Где цифра — это толщина слоя в процентах.
Например, если слой занимает 20% чашки, то стиль будет такой:

Указываем размер line-height для того, чтобы центрировать название слоя по вертикали.

Далее каждый цвет, также указываем через класс.
Например, молоко:

Согласитесь, такой код наполнения чашки выглядит достаточно прилично и легко читаемо.

Сразу понятно, что верхний слой — это воздух на 70%, а нижний — эспрессо на 30%.

5 шаг. Стили. Преодоление трудностей с версткой тарелки

С тарелкой пришлось повозиться, так как она выполнена неравномерными кривыми. Т.е. border-radius здесь бы не помог. Решено было разделить кривую на много ломанных (вы увидите это, если скачаете PSD файл). С ломанными проще их можно отрисовать с помощью CSS. Основа была взята из статьи про треугольники.

В итоге имеем много HTML и CSS кода, но тарелка теперь видна в браузере и со включенными картинками и с выключенными.

6 шаг. Финал

Верстка инфографики кофе была сделана не случайно.
Как говориться, одним выстрелом было убито много зайцев:

1. Доказано, что инфографику можно и нужно верстать, потому как в статичной инфографике нельзя показать какие-либо динамические фрагменты, нельзя добавить интерактивности или обратной связи, нельзя показать медиа-контент.
2. Показаны основы верстки для новичков.
3. Поднято настроение тем, кто увидел верстку.

Приятного вам дня и крепкого кофе в ваших чашках.))))