# 97: Photoshopping Almanac - Trik CSS

Anonim

Almanac adalah perkara yang dilancarkan di v9 dan tidak pernah selesai. Ia semakin hampir setiap hari. Jadi pada v10 kita akan merancang dengan anggapan bahawa ia "selesai".

Kami melihat reka bentuk v9 yang ada, yang agak baik tetapi tidak memberikan kandungan dengan baik. Sebagai langkah cepat, kita melihat bahawa penggantian huruf dengan huruf tebal di hover, yang biasanya tidak-tidak (sering menolak teks lain dan kelihatan pelik) tetapi kesannya sangat baik pada huruf-huruf yang terkunci ini.

Kami sudah mempunyai grafik tajuk khusus, jadi kami meletakkannya di Photoshop agar kami dapat melihat reka bentuk mengikut konteks. Sebahagian daripada apa yang saya sukai mengenai ilustrasi Giovanni adalah bahawa ia mengingatkan saya pada buku fizikal yang biasa di tempat saya membesar: The Farmer's Almanac. Kami memutuskan untuk mengambil metafora buku fizikal dan memasukkannya ke dalam reka bentuk ini. Bukan skeuomorfik atau apa-apa, tetapi hanya anggukan kepada dimensi.

Kami menjadikannya penyebaran dua halaman dan menggunakan kecerunan untuk menunjukkan bayangan dan mengikat. Kami bermain dengan beberapa bayangan untuk memanjangkan kesannya.

Sekali lagi memperluas metafora "buku", kami memilih fon tulisan tangan untuk menunjukkan huruf-huruf di dalam buku, menjadikannya lebih banyak jurnal atau buku harian daripada buku yang saya sesuai.

Kawasan ini terbahagi kepada dua (yang berfungsi dengan baik dengan susun atur 2 halaman). Satu sisi adalah untuk sifat CSS dan sisi lain untuk pemilih CSS. Untuk membantu menjadikannya lebih jelas secara visual (di luar hanya memberi judul pada dua halaman) kedua-dua sisi mempunyai warna asas yang berbeza

Kami berfikir melalui tipografi sedikit dan bergelut dengan beberapa keputusan tentang di mana kita dapat melepaskan fon tulisan tangan ini dan di mana kita tidak dapat melakukannya. Kami juga bergelut dengan kenyataan bahawa kami (sekali lagi) menggunakan seluruh halaman untuk penerokaan kandungan. Perkara yang baik, pasti, tetapi sekali lagi kami telah membuang iklan yang cukup penting untuk kelangsungan laman web ini.