# 97: Photoshopping almanahului - CSS-Tricks

Anonim

Almanahul a fost un lucru lansat în v9 și nu s-a terminat niciodată. Totuși, este din ce în ce mai aproape în fiecare zi. Deci, în v10 vom proiecta în jurul presupunerii că este „terminat”.

Ne uităm la design-ul v9 existent, care este cam sortat OK, dar nu servește foarte bine conținutul. Deoparte, vedem că rulările pentru literele cu caractere aldine în cursă, care este de obicei un „nu” (împinge adesea alt text și pare ciudat), dar este un fel de efect rece asupra acestor litere cu poziție blocată.

Avem deja grafica antetului personalizată, așa că am pus-o în Photoshop, astfel încât să putem trece cu designul în context. O parte din ceea ce îmi place la ilustrația lui Giovanni este că îmi amintește de cartea fizică obișnuită unde am crescut: Almanahul fermierilor. Decidem să luăm metafora cărții fizice și să o aducem în acest design. Nu skeuomorf sau altceva, ci doar o încuviințare a dimensionalității.

Îl facem o pagină de două pagini și folosim gradienți pentru a sugera o umbră și o legare. Ne jucăm cu niște umbre pentru a extinde efectul.

Extinzând din nou metafora „cărții”, alegem un font de mână pentru a arăta literele din carte, făcându-l mai mult un jurnal sau un jurnal decât o carte cu care sunt bine.

Această zonă este împărțită în două (care funcționează frumos cu aspectul de 2 pagini). O parte este pentru proprietățile CSS, iar cealaltă este pentru selectoarele CSS. Pentru a face acest lucru mai clar din punct de vedere vizual (dincolo de titlarea celor două pagini), cele două părți au o culoare de bază diferită.

Ne gândim puțin prin tipografie și ne luptăm cu unele decizii despre unde putem scăpa de acest font de scriere de mână și unde nu putem. De asemenea, ne luptăm puțin cu faptul că (din nou) am folosit întreaga pagină pentru explorarea conținutului. Un lucru bun, cu siguranță, dar încă o dată am eliminat publicitatea care este destul de vitală pentru supraviețuirea site-ului.