# 97: Photoshopping the Almanac - Triky CSS

Anonim

Almanach bol vecou zahájenou v9 a nikdy nebol úplne hotový. Každým dňom je to stále bližšie a bližšie. Takže vo v10 navrhneme okolo predpokladu, že je „hotovo“.

Pozeráme sa na existujúci dizajn v9, ktorý je trochu v poriadku, ale neslúži tak dobre. Ako rýchlu bočnú stranu vidíme, že prejdenie kurzorom na písmená zvýraznené kurzorom, ktoré je zvyčajne záporné (často odstraňuje iný text a vyzerá čudne), ale na tieto písmená v pozícií s uzamknutou pozíciou je to akýsi super efekt.

Vlastnú grafiku hlavičky už máme umiestnenú, takže sme ju vložili do Photoshopu, aby sme si mohli pohrať s dizajnom v kontexte. Súčasťou toho, čo sa mi na Giovanniho ilustrácii páči, je to, že mi pripomína fyzickú knihu, ktorá bola bežná tam, kde som vyrastal: Farmársky almanach. Rozhodli sme sa vziať fyzickú knižnú metaforu a preniesť ju do tohto dizajnu. Nie skeomorfné alebo také niečo, ale iba kývnutie na dimenzionálnosť.

Vytvoríme z toho dvojstránku a pomocou prechodov naznačíme tieň a väzbu. Hráme sa s niektorými tieňmi, aby sme rozšírili efekt.

Opäť rozširujeme metaforu „knihy“, vyberáme rukopisné písmo, aby sme zobrazovali písmená v knihe, takže je to skôr denník alebo denník ako kniha, s ktorou som v pohode.

Táto oblasť je rozdelená na dve časti (čo funguje dobre s dvojstránkovým rozložením). Jedna strana je pre vlastnosti CSS a druhá strana pre selektory CSS. Aby to bolo vizuálne jasnejšie (okrem nadpisu na dvoch stranách), majú obe strany inú základnú farbu.

Trochu sa zamyslíme nad typografiou a zápasíme s niektorými rozhodnutiami o tom, kam sa môžeme dostať pomocou tohto písma rukopisu a kde nie. Trochu zápasíme aj s tým, že sme (opäť) použili celú stránku na prieskum obsahu. Dobrá vec, určite, ale opäť sme odstránili reklamu, ktorá je pre prežitie stránky veľmi dôležitá.