# 97: Photoshopping el Almanaque - Trucos CSS

Tabla de contenido

El Almanaque fue algo que se lanzó en la versión 9 y nunca se terminó. Sin embargo, cada día se acerca más y más. Por tanto, en la versión 10, el diseño se basa en la suposición de que está "hecho".

Observamos el diseño v9 existente, que está bastante bien, pero no sirve al contenido muy bien. Como un comentario rápido, vemos que los desplazamientos de las letras en negrita al pasar el mouse, que generalmente es un no-no (a menudo aleja otro texto y se ve extraño), pero es un efecto genial en estas letras de posición bloqueada.

Ya tenemos el gráfico de encabezado personalizado en su lugar, así que lo pusimos en Photoshop para que podamos jugar con el diseño en contexto. Parte de lo que me gusta de la ilustración de Giovanni es que me recuerda el libro físico que era común donde crecí: The Farmer's Almanac. Decidimos tomar la metáfora del libro físico e incorporarla a este diseño. No skeuomorphic ni nada, sino solo un guiño a la dimensionalidad.

Lo convertimos en una extensión de dos páginas y usamos degradados para insinuar una sombra y encuadernación. Jugamos con algunas sombras para ampliar el efecto.

Nuevamente ampliando la metáfora del “libro”, elegimos una fuente de escritura a mano para mostrar las letras del libro, haciéndolo más un diario o diario que un libro con el que estoy bien.

Esta área se divide en dos (lo que funciona muy bien con el diseño de 2 páginas). Un lado es para propiedades CSS y el otro lado es para selectores CSS. Para ayudar a que esto sea visualmente más claro (más allá de solo titular las dos páginas), los dos lados tienen un color base diferente.

Pensamos un poco en la tipografía y luchamos con algunas decisiones sobre dónde podemos salirse con la nuestra con esta fuente de escritura a mano y dónde no. También luchamos un poco con el hecho de que (nuevamente) usamos toda la página para la exploración de contenido. Algo bueno, sin duda, pero una vez más hemos eliminado la publicidad, que es bastante vital para la supervivencia del sitio.

Articulos interesantes...