Tässä alatunnisteen rakentamisen viimeisessä kuvaruudussa työskentelemme alatunnisteessa, jossa ovat CodePen- ja ShopTalk-alueet.
Meidän on muutettava HTML-koodia hieman, kun on tullut ymmärrys siitä, että pohjassa olevat neljä palaa (logo, teksti, logo, teksti) olisi järkevää olla sarja toisiinsa keskitettyjä inline-lohkoelementtejä ( vertical-align: middle;).
Olemme törmänneet ongelmaan, jossa inline-block-elementtien välillä on ylimääräistä tilaa, joten käytämme font-size: 0; temppu tästä artikkelista.
Saamme ulkoasun toimimaan lopulta, mutta et todellakaan näe minua pudotettavaksi todellisissa kuvissa. Kuten teimme Photostarin kanssa, teen uuden Photoshop-tiedoston vain näille alatunnisteille. Tämä helpottaa vain näiden logojen käsittelyä ja tulevia päivityksiä. Teen ne myös kaksinkertaisiksi ja pienennän niitä, jotta ne näyttävät hyvältä Retina-näytöissä. Pudotan ne paikkamerkkien tunnisteisiin, jotka meillä on, ja se toimii hyvin.
Tiedostot
- 74-alatunnisteen logot.psd.zip