# 97: Photoshopping the Almanac - Triky CSS

Anonim

Almanach byl věc spuštěná ve verzi 9 a nikdy nebyla hotová. Každým dnem se to blíží a blíží. Ve verzi 10 tedy navrhneme na základě předpokladu, že je „hotovo“.

Podíváme se na stávající design v9, který je trochu v pořádku, ale neslouží obsahu super dobře. Jako rychlou stranou vidíme, že při přechodu na písmena tučně při najetí myší, která je obvykle ne-ne (často odtlačí další text a vypadá divně), ale na tato písmena v uzamčené poloze je to trochu skvělý efekt.

Vlastní grafiku záhlaví již máme na místě, takže jsme ji vložili do Photoshopu, abychom si mohli pohrávat s designem v kontextu. Část toho, co se mi na Giovanniho ilustraci líbí, je to, že mi připomíná fyzickou knihu, která byla běžná tam, kde jsem vyrůstal: Farmářský almanach. Rozhodli jsme se vzít metaforu fyzické knihy a vnést ji do tohoto designu. Ne skeomomorfní nebo tak něco, ale jen kývnutí na dimenzionálnost.

Děláme to dvoustránkové šíření a pomocí přechodů naznačujeme stín a vazbu. Hrajeme s některými stíny, abychom rozšířili efekt.

Znovu rozšiřujeme metaforu „knihy“, vybíráme písmo rukopisu, abychom zobrazili písmena v knize, což z ní dělá spíše deník nebo deník než knihu, se kterou jsem v pohodě.

Tato oblast je rozdělena na dvě části (což funguje dobře s dvoustránkovým rozvržením). Jedna strana je pro vlastnosti CSS a druhá strana pro selektory CSS. Aby to bylo vizuálně jasnější (kromě pouhého titulkování dvou stránek), mají obě strany jinou základní barvu.

Trochu přemýšlíme nad typografií a zápasíme s některými rozhodnutími o tom, kde se s tímto rukopisným písmem dostaneme a kde ne. Trochu také zápasíme s tím, že jsme (znovu) použili celou stránku k průzkumu obsahu. Dobrá věc, to je jisté, ale opět jsme odstranili reklamu, která je docela důležitá pro přežití webu.