N ° 97: Photoshopping l'Almanach - Astuces CSS

Anonim

L'Almanach a été lancé dans la v9 et n'a jamais été tout à fait fait. Cela se rapproche de plus en plus chaque jour. Donc, dans la v10, nous allons concevoir autour de l'hypothèse que c'est «terminé».

Nous examinons la conception existante de la v9, qui est un peu OK mais ne sert pas très bien le contenu. En bref, nous voyons que les survols pour les lettres en gras au survol, ce qui est généralement un non-non (repousse souvent un autre texte et semble étrange), mais c'est une sorte d'effet cool sur ces lettres à position verrouillée.

Nous avons déjà le graphique d'en-tête personnalisé en place, nous l'avons donc mis dans Photoshop afin de pouvoir bricoler la conception en contexte. Une partie de ce que j'aime dans l'illustration de Giovanni, c'est qu'elle me rappelle le livre physique qui était commun là où j'ai grandi: The Farmer's Almanac. Nous décidons de prendre la métaphore physique du livre et de l'intégrer dans cette conception. Pas skeuomorphic ou quoi que ce soit, mais juste un clin d'œil à la dimensionnalité.

Nous en faisons une planche de deux pages et utilisons des dégradés pour indiquer une ombre et une reliure. On joue avec quelques ombres pour prolonger l'effet.

En prolongeant encore la métaphore du «livre», nous choisissons une police d'écriture manuscrite pour montrer les lettres du livre, ce qui en fait plus un journal ou un agenda qu'un livre qui me convient.

Cette zone est divisée en deux (ce qui fonctionne bien avec la mise en page de 2 pages). Un côté est pour les propriétés CSS et l'autre pour les sélecteurs CSS. Pour aider à rendre cela plus clair visuellement (au-delà du simple titrage des deux pages), les deux côtés ont une couleur de base différente.

Nous réfléchissons un peu à la typographie et luttons pour décider où nous pouvons nous en tirer avec cette police d'écriture manuscrite et où nous ne pouvons pas. Nous luttons également un peu avec le fait que nous avons (encore) utilisé la page entière pour l'exploration de contenu. Une bonne chose, bien sûr, mais encore une fois, nous avons supprimé la publicité qui est assez vitale pour la survie du site.