Po podivném zmatku v posledním videu o tom, kterou hlavičku jsme vlastně dělali, tentokrát opravdu budeme implementovat vlastní hlavičku pro stránku Nabídky! Tenhle provedla Meg Hunt.
Stejně jako všechny záhlaví jsme strávili nějaký čas prohlížením původních souborů a zjišťováním, jak bude na stránce nejlépe sedět. Vyzkoušíme několik možností, ale nakonec se rozhodneme, že vložení do uzavřeného pole je nejlepší (na rozdíl od něčeho, jako je záhlaví Demos, kde se záhlaví roztaví do ohraničení kolem obsahu.
Při jeho exportu hrajeme s mnoha různými grafickými formáty. Je zajímavé, že tento konkrétní styl je přibližně stejný v kvalitě i velikosti souboru mezi PNG a JPG.webp. Výstup je široký 2000 pixelů, což by mělo vypadat dobře na jakékoli obrazovce. Také jsme zasáhli asi 150k, což je velké, ale pro hrdinu, jako je tento, je OK cíl.
Začínáme získávat šablonu pro dohody v pořádku, včetně pohledu na to, jak jsou dohody každé jednotlivé vlastní pole, které jsou před výstupem randomizovány. Strávíme více času tímto značením a tím později, ale protože jsme v této šabloně připravovali věci na hlavičku, mohli bychom ji také vyčistit.
Podíváme se na několik různých možností umístění vlastní grafiky záhlaví na stránku. Nejdůležitější má obrázek na pozadí, protože používáme sémantiku
pro nahrazení názvu a obrázku. Používání background-sizezkontrolujeme cover, ale to může způsobit cut-off. Zkontrolovali jsme obsah, ale to umožňuje prostor zvenčí. 100%dělá trik, ale budeme muset udělat box ve stylu poměru stran, aby to dobře fungovalo. To je snadné, stačí udělat výšku 0 a použít procentní horní výplň, aby to fungovalo (polstrovaná krabice).
Toto je sedmá vlastní hlavička, kterou jsme udělali, a každá z nich byla provedena jinak. Web design, hm? Jaký výlet.