После странной путаницы в последнем видео о том, какой заголовок мы на самом деле делаем, на этот раз мы действительно собираемся реализовать настраиваемый заголовок для страницы сделок! Это сделала Мэг Хант.
Как и все заголовки, мы потратили некоторое время на изучение исходных файлов и выяснение того, как они лучше всего будут размещаться на странице. Мы пробуем несколько вариантов, но в конечном итоге решаем, что лучше всего поместить его в ограниченный ящик (в отличие от чего-то вроде заголовка Demos, где заголовок плавится с рамкой вокруг контента.
При экспорте мы играем с множеством различных графических форматов. Интересно, что этот конкретный стиль примерно одинаков как по качеству, так и по размеру файла между PNG и JPG.webp. Мы выводим его шириной 2000 пикселей, что должно хорошо смотреться на любом экране. Мы также набрали около 150 тысяч, что немало, но для такой графики героя это нормальная цель.
Мы начинаем упорядочивать шаблон сделок, в том числе изучать, как каждое отдельное пользовательское поле в сделках рандомизируется перед выводом. Мы потратим больше времени на эту разметку и все это позже, но, поскольку мы в этом шаблоне готовим все для заголовка, мы могли бы также очистить его.
Мы рассмотрим несколько различных возможностей размещения настраиваемого графического заголовка на странице. Фоновое изображение имеет наибольший смысл, поскольку мы используем семантическую
для замены названия и изображения. Используя background-size, мы проверяем cover, но это может привести к отключению. Мы проверяем содержание, но там остается место снаружи. 100%делает свое дело, но нам нужно создать блок стиля соотношения сторон, чтобы он работал нормально. Это просто, мы просто устанавливаем высоту 0 и используем процентное заполнение сверху, чтобы это работало (поле с заполнением).
Это седьмой пользовательский заголовок, который мы сделали, и каждый из них был сделан по-своему. Веб-дизайн, а? Какая поездка.