Po dziwnym zamieszaniu w ostatnim filmie o tym, który nagłówek faktycznie robimy, tym razem naprawdę zamierzamy zaimplementować niestandardowy nagłówek na stronie Oferty! Ten został wykonany przez Meg Hunt.
Podobnie jak w przypadku wszystkich nagłówków, spędziliśmy trochę czasu na przeglądaniu oryginalnych plików i zastanawianiu się, jak najlepiej będzie wyglądać na stronie. Wypróbowujemy kilka opcji, ale ostatecznie decydujemy, że najlepiej jest umieścić go w zamkniętym pudełku (w przeciwieństwie do czegoś w rodzaju nagłówka Demos, w którym nagłówek stapia się w ramkę wokół treści.
Eksportując go, bawimy się wieloma różnymi formatami graficznymi. Co ciekawe, ten konkretny styl jest mniej więcej taki sam, zarówno pod względem jakości, jak i rozmiaru pliku między PNG i JPG.webp. Wyświetlamy go w szerokości 2000 pikseli, co powinno dobrze wyglądać na każdym ekranie. Udało nam się również osiągnąć około 150 000, co jest duże, ale dla takiej grafiki bohatera jest dobrym celem.
Zaczynamy porządkować szablon umów, w tym sprawdzamy, w jaki sposób są to poszczególne pola niestandardowe, które są losowane przed wyświetleniem. Spędzimy więcej czasu nad tym znacznikiem i tym wszystkim później, ale ponieważ jesteśmy w tym szablonie, przygotowując wszystko do nagłówka, równie dobrze możemy go wyczyścić.
Przyjrzymy się kilku różnym możliwościom umieszczenia niestandardowej grafiki nagłówka na stronie. Obraz tła ma największy sens, ponieważ używamy semantyki
dla tytułu i zastąpienia obrazu. Używając background-size, sprawdzamy cover, ale to może powodować przerwy. Sprawdzamy, zawiera, ale to pozwala na miejsce na zewnątrz. 100%załatwia sprawę, ale będziemy musieli stworzyć pudełko ze stylem proporcji, aby dobrze działało. To jednak proste, po prostu ustawiamy wysokość 0 i używamy procentowego górnego wypełnienia, aby to zadziałało (wyściełane pudełko).
To już siódmy niestandardowy nagłówek, który wykonaliśmy i każdy z nich został wykonany inaczej. Projektowanie stron internetowych, co? Co za podróż.