Mes turime pagrindinę galerijos antraštę, tačiau trūksta mažų mėlynų žmonių, kuriuos Erica įdėjo į originalią iliustraciją. Mes apie tai kalbėjomės iš anksto ir nusprendėme, kad būtų labai šaunu, jei pakeitus ekrano dydį, žmonės liktų vietoje, kai galerijos siena juda už jų, todėl atrodo, kad jie baimindamiesi naršo galeriją.
Kadangi žmonių grafika yra grynai ornemantinė, naudoti žymėjimą jiems nėra idealu. Laimei, yra du iš jų ir kiekviename elemente ( ::before
ir ::after
) gauname du nemokamus pseudo elementus . Mes naudojame tuos, kad juos pridėtume.
Šiame vaizdo įraše pristatome koncepciją, kuri ir toliau bus naudinga, „reverso media queries“ koncepciją. Šiuo dizainu daugiausia dirbame žemyn darbalaukyje, todėl mūsų žiniasklaidos užklausos daugiausia grindžiamos max-width
. Bet jei mes nustatysime tas pačias medijos užklausas pagal tai min-width
, mes galime nukreipti ekraną tik tada, kai jis didesnis nei tam tikras dydis, o ne mažesnis.
Šiomis aplinkybėmis žmonių grafika tiesiog netelpa mažuose ekranuose. Taigi, norėdami juos įkelti, naudojame „Reverso“ medijos užklausą, tokiu būdu įkelsime juos į didelius ekranus, kuriuose jie veikia, bet neįkraukite į mažus ekranus. Tai geriau nei nuolat juos krauti ir slėpti ant mažų ekranų.