# 117: Tilpasset topptekst for tilbud - CSS-triks

Anonim

Etter den rare forvirringen i den siste videoen om hvilken header vi faktisk gjorde, denne gangen skal vi virkelig implementere den tilpassede headeren for Deals-siden! Denne ble gjort av Meg Hunt.

Som alle overskriftene brukte vi litt tid på å se på originalfilene og finne ut hvordan det best kommer til å sitte på siden. Vi prøver noen få alternativer, men til slutt bestemmer vi oss for å legge det i en begrenset rute (i motsetning til noe som Demos-overskriften der overskriften smelter inn i en kant rundt innholdet.

Når vi eksporterer den, spiller vi med mange forskjellige grafiske formater. Denne spesielle stilen handler interessant nok om det samme i både kvalitet og filstørrelse mellom PNG og JPG.webp. Vi sender den ut med 2000 px bred, noe som skal se bra ut på hvilken som helst skjerm. Vi traff også rundt 150 000, som er stort, men for en helt grafikk som dette, er det et OK mål.

Vi begynner å få orden på malen for avtaler, inkludert å se på hvordan tilbud er hver enkelt tilpassede felt som er randomisert før de sendes ut. Vi bruker mer tid på denne markeringen og alt det senere, men siden vi er i denne malen for å gjøre ting klare for overskriften, kan vi like godt rydde opp.

Vi ser på flere forskjellige muligheter for å sette den tilpassede toppteksten på siden. Et bakgrunnsbilde gir mest mening, siden vi bruker en semantikk

for tittel og bildeutskifting. Ved å background-sizesjekke ut cover, men det kan føre til kutt. Vi sjekker ut inneholder, men det gir plass på utsiden. 100%gjør susen, men vi må lage en størrelsesforhold for størrelsesforhold for å ha det bra. Det er skjønt enkelt, vi lager bare høyden 0 og bruker en prosent topp polstring for å få det til å fungere (polstret boks).

Dette er den syvende tilpassede overskriften vi har gjort, og hver eneste av dem ble gjort annerledes. Nettdesign, ikke sant? For en tur.