# 97: Photoshopowanie almanachu - CSS-Tricks

Anonim

Almanach został wydany w wersji 9 i nigdy nie został ukończony. Z każdym dniem jest coraz bliżej. Dlatego w wersji 10 będziemy projektować przy założeniu, że jest to „gotowe”.

Patrzymy na istniejący projekt v9, który jest trochę OK, ale nie obsługuje zbyt dobrze treści. Na marginesie widzimy, że najazdy na litery pogrubione po najechaniu kursorem są zwykle nie-nie (często odpychają inny tekst i wyglądają dziwnie), ale to trochę fajny efekt na tych literach z zablokowaną pozycją.

Mamy już niestandardową grafikę nagłówka, więc umieściliśmy ją w Photoshopie, abyśmy mogli majstrować przy projekcie w kontekście. Częścią tego, co podoba mi się w ilustracji Giovanniego, jest to, że przypomina mi fizyczną książkę, która była powszechna, gdy dorastałem: Almanach farmera. Postanawiamy wziąć fizyczną metaforę książki i wprowadzić ją do tego projektu. Nie skeuomorficzne czy coś w tym stylu, ale tylko ukłon w stronę wymiarowości.

Tworzymy dwustronicową rozkładówkę i używamy gradientów, aby wskazać cień i oprawę. Bawimy się cieniami, aby przedłużyć efekt.

Ponownie rozszerzając metaforę „książki”, wybieramy czcionkę pisma ręcznego, aby pokazać litery w książce, czyniąc ją bardziej dziennikiem lub pamiętnikiem niż książką, z którą jestem w porządku.

Ten obszar jest podzielony na dwie części (co dobrze współgra z układem 2 stron). Jedna strona jest przeznaczona dla właściwości CSS, a druga dla selektorów CSS. Aby uczynić to bardziej przejrzystym (poza tylko tytułem dwóch stron), obie strony mają inny kolor podstawowy.

Zastanawiamy się trochę nad typografią i zmagamy się z kilkoma decyzjami, gdzie możemy uciec z tą czcionką pisma ręcznego, a gdzie nie. Zmagamy się również trochę z faktem, że (ponownie) wykorzystaliśmy całą stronę do eksploracji treści. Z pewnością to dobra rzecz, ale po raz kolejny usunęliśmy reklamy, które są bardzo ważne dla przetrwania witryny.