Viimeisen videon oudon hämmennyksen jälkeen siitä, mitä otsikkoa me todella teimme, tällä kertaa aiomme toteuttaa mukautetun otsikon Tarjoukset-sivulle! Tämän teki Meg Hunt.
Kuten kaikki otsikot, käytimme jonkin aikaa katsomalla alkuperäisiä tiedostoja ja selvittämällä, miten se parhaiten istuu sivulla. Yritämme muutamia vaihtoehtoja, mutta viime kädessä päätämme, että sen sijoittaminen suljettuun laatikkoon on paras (toisin kuin jotain Demos-otsikkoa, jossa otsikko sulaa reunaksi sisällön ympärille.
Viemällä sitä pelaamme monilla erilaisilla graafisilla muodoilla. Tämä erityinen tyyli on mielenkiintoista, että PNG: n ja JPG.webp: n laatu ja tiedostokoko ovat suunnilleen yhtä suuret. Tuotamme sen 2000px: n leveydellä, jonka pitäisi näyttää hyvältä missä tahansa näytössä. Löysimme myös noin 150 kt, mikä on iso, mutta tällaiselle sankarille on OK-kohde.
Alamme saada tarjousten mallin järjestyksessä, mukaan lukien tarkastelemme, kuinka tarjoukset ovat kukin yksittäiset mukautetut kentät, jotka satunnaistetaan ennen tulostamista. Vietämme enemmän aikaa tähän merkintään ja kaikkeen myöhemmin, mutta koska olemme tässä mallissa, joka valmistelee asioita otsikkoon, voimme myös puhdistaa sen.
Tarkastelemme useita erilaisia mahdollisuuksia mukautetun otsikkokuvan sijoittamiseksi sivulle. Taustakuva on järkevin, koska käytämme semanttia
otsikon ja kuvan korvaamiseksi. Käyttämällä background-sizetarkistamme cover, mutta se voi aiheuttaa katkaisuja. Tarkistamme sisältää, mutta se antaa tilaa ulkopuolelle. 100%tekee tempun, mutta meidän on tehtävä kuvasuhteen tyyliruutu, jotta se toimisi hienosti. Se on kuitenkin helppoa, teemme vain korkeuden 0 ja käytämme prosenttista yläpehmustetta, jotta se toimisi (pehmustettu laatikko).
Tämä on seitsemäs mukautettu otsikko, jonka olemme tehneet, ja jokainen niistä tehtiin eri tavalla. Web-suunnittelu, eikö? Mikä matka.