I denne siste screencasten for å bygge ut bunnteksten, jobber vi på bunnteksten der CodePen og ShopTalk-områdene er.
Vi må endre HTML litt når vi kommer til erkjennelsen at de fire biter langs bunnen (logo, tekst, logo, tekst) vil være fornuftig å være en serie med innebygde blokkelementer som er sentrert på hverandre ( vertical-align: middle;
).
Vi støter på problemet der det er ekstra plass mellom innebygde blokkelementer, så vi bruker skriftstørrelsen: 0; knep fra denne artikkelen.
Vi får oppsettet til å fungere til slutt, men du ser faktisk ikke at jeg faller i de virkelige bildene. Som vi gjorde med Photostar, lager jeg en ny Photoshop-fil bare for disse bunntekstlogoene. Dette gjør det bare enklere å håndtere og fremtidige oppdateringer av disse logoene. Jeg lager dem også 2x i størrelse og skalerer dem ned slik at de ser bra ut på Retina-skjermer. Jeg slipper dem i plassholderbildekodene vi har, og det fungerer bra.
Filer
- 74-bunn Logos.psd.zip