В этом заключительном скринкасте создания нижнего колонтитула мы работаем с нижним колонтитулом, где находятся области CodePen и ShopTalk.
Мы должны немного изменить HTML, поскольку пришли к осознанию того, что четыре фрагмента внизу (логотип, текст, логотип, текст) имеют смысл быть серией встроенных блочных элементов, центрированных друг относительно друга ( vertical-align: middle;).
Мы сталкиваемся с проблемой, когда между элементами inline-block есть лишнее пространство, поэтому мы используем font-size: 0; трюк из этой статьи.
В конце концов, макет работает, но на самом деле вы не видите, как я бросаю настоящие изображения. Как и в случае с Photostar, я создаю новый файл Photoshop только для этих логотипов нижнего колонтитула. Это просто упрощает работу с этими логотипами и упрощает будущие обновления этих логотипов. Я также делаю их в 2 раза больше и уменьшаю, чтобы они хорошо смотрелись на дисплеях Retina. Я помещаю их в имеющиеся у нас теги изображений-заполнителей, и это прекрасно работает.
Файлы
- 74-футовый Logos.psd.zip