Доброе утро тем, кто только проснулся и может быть еще медитирует за чашкой ароматного крепкого кофе. Если у вас сейчас не утро, а день/вечер/ночь, то вас скорее всего просто заинтересовала тематика.
И так, статья рассчитана на новичков, занимающихся веб-строительством. И в ней пойдет речь о верстке в 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
— это слой со своим наполнением, объемом и цветом.
В итоге, получилось вот так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="main"> <div class="cup"> <h2>Эспрессо</h2> <h3>[ess-press-oh]</h3> <div class="pen"></div> <div class="steam"> <div class="col"><div class="pc1"></div><div class="pc2"></div></div> <div class="col"><div class="pc1"></div><div class="pc2"></div></div> <div class="col"><div class="pc1"></div><div class="pc2"></div></div> </div> <div class="saucer"> <div class="pc l1"></div><div class="pc l2"></div><div class="pc l3"></div><div class="pc l4"></div><div class="pc l5"></div><div class="pc l6"></div><div class="pc l7"></div><div class="pc l8"></div> <div class="pc l9"></div><div class="pc l10"></div><div class="pc l11"></div><div class="pc l12"></div><div class="pc l13"></div><div class="pc l14"></div> </div> <div class="content"> <ul class="layers"> <li class="h70 air"></li> <li class="h30 espresso">Эспрессо</li> </ul> </div> </div> </div> |
Дополнение. Наверное, любознательный читатель по своему сделал бы HTML разметку. Например, более компактнее имена классов (надеемся вам стало понятно, почему, через классы, а не через id
) или, например, чашки не через элементы DIV
, а с помощью списка, ну и так далее. Напоминаем вам, что цель статьи не сделать самую оптимальную верстку, а показать новичкам ее основы.
4 шаг. Стили
Стилизация достаточно проста. Вы можете посмотреть ее в примере. Остановимся на интересных моментах.
Чашка
Присутствуют стили из CSS3, отвечающие за закругления чашки.
1 2 3 4 5 6 7 8 9 |
-webkit-border-bottom-right-radius: 69px; -webkit-border-bottom-left-radius: 69px; -moz-border-radius-bottomright: 69px; -moz-border-radius-bottomleft: 69px; border-bottom-right-radius: 69px; border-bottom-left-radius: 69px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; |
Ручка чашки
Тоже самое для ручки.
1 2 3 4 5 6 |
-webkit-border-bottom-right-radius: 102px; -webkit-border-top-right-radius: 102px; -moz-border-radius-bottomright: 102px; -moz-border-radius-topright: 102px; border-bottom-right-radius: 102px; border-top-right-radius: 102px; |
Дымок
Дымок представлен тремя элементами с классом col
. Каждая струйка дымка представлена тремя HTML элементами и двумя псевдо-элементами. В стилях все те же закругления из CSS3. Отметим лишь изменение цвета дымка при наведении курсором мыши на чашку.
Выполнено это вот так:
1 2 |
.cup:hover .col .pc1{ border-color:#cccbcb; |
Слои наполнения
Отметим, что с последним слоем (который самый нижний) пришлось повозится. Он никак не хотел прятаться в чашку, и было решено у этого слоя также закруглить края.
Выполнено это было так:
1 2 3 4 5 6 7 8 |
ul.layers li:nth-last-child(1){ -webkit-border-bottom-right-radius: 48px; -webkit-border-bottom-left-radius: 48px; -moz-border-radius-bottomright: 48px; -moz-border-radius-bottomleft: 48px; border-bottom-right-radius: 48px; border-bottom-left-radius: 48px; } |
Толщина слоев была выполнена через классы h10
, h20
, h30
и т.д. Где цифра — это толщина слоя в процентах.
Например, если слой занимает 20% чашки, то стиль будет такой:
1 2 3 4 |
.h20{ height: 60px; line-height: 60px; } |
Указываем размер line-height
для того, чтобы центрировать название слоя по вертикали.
Далее каждый цвет, также указываем через класс.
Например, молоко:
1 |
.milk{background: #c8dcb4;} |
Согласитесь, такой код наполнения чашки выглядит достаточно прилично и легко читаемо.
1 2 |
<li class="h70 air"></li> <li class="h30 espresso">Эспрессо</li> |
Сразу понятно, что верхний слой — это воздух на 70%, а нижний — эспрессо на 30%.
5 шаг. Стили. Преодоление трудностей с версткой тарелки
С тарелкой пришлось повозиться, так как она выполнена неравномерными кривыми. Т.е. border-radius
здесь бы не помог. Решено было разделить кривую на много ломанных (вы увидите это, если скачаете PSD файл). С ломанными проще их можно отрисовать с помощью CSS. Основа была взята из статьи про треугольники.
В итоге имеем много HTML и CSS кода, но тарелка теперь видна в браузере и со включенными картинками и с выключенными.
6 шаг. Финал
Верстка инфографики кофе была сделана не случайно.
Как говориться, одним выстрелом было убито много зайцев:
- Доказано, что инфографику можно и нужно верстать, потому как в статичной инфографике нельзя показать какие-либо динамические фрагменты, нельзя добавить интерактивности или обратной связи, нельзя показать медиа-контент.
- Показаны основы верстки для новичков.
- Поднято настроение тем, кто увидел верстку.
Приятного вам дня и крепкого кофе в ваших чашках.))))