# 97: Photoshopping the Almanac - CSS-Tricks

Anonim

O Almanaque foi lançado na v9 e nunca foi concluído. Está ficando mais perto e mais perto a cada dia. Portanto, na v10, projetaremos com base no pressuposto de que está "pronto"

Nós olhamos para o design v9 existente, que é meio que OK, mas não atende muito bem ao conteúdo. Como um aparte rápido, vemos que os rollovers para as letras em negrito ao pairar, o que geralmente é um não-não (muitas vezes empurra outro texto para longe e parece estranho), mas é um efeito legal nessas letras de posição bloqueada.

Já temos o gráfico de cabeçalho personalizado no lugar, então o colocamos no Photoshop para que possamos mexer no design no contexto. Parte do que gosto na ilustração de Giovanni é que ela me lembra o livro físico que era comum onde eu cresci: O Almanaque do Fazendeiro. Decidimos pegar a metáfora do livro físico e trazê-la para este design. Não é skeuomórfico nem nada, mas apenas um aceno para a dimensionalidade.

Fazemos uma propagação de duas páginas e usamos gradientes para sugerir uma sombra e encadernação. Brincamos com algumas sombras para estender o efeito.

Mais uma vez estendendo a metáfora do “livro”, escolhemos uma fonte manuscrita para mostrar as letras do livro, tornando-o mais um diário ou diário do que um livro, o que não me incomoda.

Esta área é dividida em duas (o que funciona bem com o layout de 2 páginas). Um lado é para propriedades CSS e o outro lado é para seletores CSS. Para ajudar a tornar isso visualmente mais claro (além de apenas intitular as duas páginas), os dois lados têm uma cor de base diferente.

Pensamos um pouco na tipografia e lutamos com algumas decisões sobre onde podemos sair impunes com essa fonte manuscrita e onde não podemos. Também lutamos um pouco com o fato de (novamente) termos usado a página inteira para a exploração de conteúdo. Uma coisa boa, com certeza, mas mais uma vez removemos a publicidade que é vital para a sobrevivência do site.