După confuzia ciudată din ultimul videoclip despre antetul pe care îl făceam de fapt, de data aceasta vom implementa antetul personalizat pentru pagina Oferte! Aceasta a fost realizată de Meg Hunt.
La fel ca toate anteturile, am petrecut ceva timp uitându-ne la fișierele originale și aflând cum va sta cel mai bine pe pagină. Încercăm câteva opțiuni, dar în cele din urmă decidem să îl introducem într-o casetă limitată (spre deosebire de ceva de genul antet Demos, în care antetul se topește într-un chenar în jurul conținutului.
La export, ne jucăm cu o mulțime de diferite formate grafice. În mod interesant, acest stil particular este aproximativ egal atât în calitate, cât și în dimensiunea fișierului dintre PNG și JPG.webp. Îl scoatem la 2000px lățime, ceea ce ar trebui să arate bine pe orice ecran. Am lovit, de asemenea, aproximativ 150k, ceea ce este mare, dar pentru un erou grafic ca acesta, este o țintă OK.
Începem să obținem șablonul pentru oferte în ordine, inclusiv examinând modul în care ofertele sunt fiecare câmp personalizat individual, care sunt randomizate înainte de a fi afișate. Vom petrece mai mult timp pe acest marcaj și pe toate acestea mai târziu, dar, din moment ce suntem în acest șablon, pregătim lucrurile pentru antet, la fel de bine îl putem curăța.
Ne uităm la mai multe posibilități diferite pentru plasarea graficului antet personalizat pe pagină. O imagine de fundal are cel mai mult sens, deoarece folosim o semantică
pentru înlocuirea titlului și a imaginii. Folosind background-size, verificăm cover, dar acest lucru poate provoca tăieturi. Verificăm conținutul, dar asta permite spațiu în exterior. 100%face truc, dar va trebui să facem o casetă de stil de raport de aspect pentru a funcționa frumos. Este ușor, totuși, facem doar înălțimea 0 și folosim un procentaj de umplutură de sus pentru a face acest lucru (cutie căptușită).
Acesta este al șaptelea antet personalizat pe care l-am realizat și fiecare dintre ele a fost făcut diferit. Design web, nu? Ce excursie.