Dopo la strana confusione nell'ultimo video su quale intestazione stavamo effettivamente facendo, questa volta implementeremo davvero l'intestazione personalizzata per la pagina delle offerte! Questo è stato fatto da Meg Hunt.
Come tutte le intestazioni, abbiamo passato un po 'di tempo a guardare i file originali e a capire come sarebbe meglio stare nella pagina. Proviamo alcune opzioni, ma alla fine decidiamo che è meglio metterlo in una scatola ristretta (al contrario di qualcosa come l'intestazione Demos in cui l'intestazione si fonde in un bordo attorno al contenuto.
Esportandolo, giochiamo con molti formati grafici diversi. Questo particolare stile, è interessante notare, è all'incirca uguale sia in qualità che nella dimensione del file tra PNG e JPG.webp. Lo produciamo a 2000px di larghezza, che dovrebbe avere un bell'aspetto su qualsiasi schermo. Abbiamo anche raggiunto circa 150.000, il che è grande ma per una grafica eroica come questa è un obiettivo OK.
Iniziamo a ottenere il modello per le offerte in ordine, anche guardando come le offerte sono ogni singolo campo personalizzato che viene randomizzato prima di essere emesso. Dedicheremo più tempo a questo markup e tutto il resto in seguito, ma dal momento che siamo in questo modello a preparare le cose per l'intestazione, potremmo anche ripulirlo.
Esaminiamo diverse possibilità per inserire la grafica dell'intestazione personalizzata nella pagina. Un'immagine di sfondo ha più senso, poiché stiamo usando una semantica
per la sostituzione del titolo e dell'immagine. Usando background-size, controlliamo cover, ma ciò può causare interruzioni. Verifichiamo contenere, ma questo lascia spazio all'esterno. 100%fa il trucco, ma avremo bisogno di creare una casella di stile delle proporzioni per farlo funzionare bene. È facile, però, facciamo solo l'altezza 0 e usiamo una percentuale di riempimento superiore per farlo funzionare (scatola imbottita).
Questa è la settima intestazione personalizzata che abbiamo creato e ognuna di esse è stata realizzata in modo diverso. Web design, eh? Che viaggio.