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