# 97: Pemotretan Almanak - Trik CSS

Anonim

Almanak adalah sesuatu yang diluncurkan di v9 dan tidak pernah selesai. Itu semakin dekat dan semakin dekat setiap hari. Jadi di v10 kami akan merancang dengan asumsi bahwa ini sudah "selesai".

Kami melihat desain v9 yang ada, yang agak OK tetapi tidak menyajikan konten dengan sangat baik. Singkatnya, kami melihat bahwa rollover untuk huruf tebal saat melayang, yang biasanya tidak-tidak (sering mendorong teks lain menjauh dan terlihat aneh) tetapi ini semacam efek keren pada huruf posisi terkunci ini.

Kami sudah memiliki grafik tajuk khusus, jadi kami meletakkannya di Photoshop sehingga kami dapat bermain-main dengan desain dalam konteks. Bagian dari apa yang saya suka tentang ilustrasi Giovanni adalah bahwa ilustrasi itu mengingatkan saya pada buku fisik yang umum di tempat saya dibesarkan: Almanak Petani. Kami memutuskan untuk menggunakan metafora buku fisik dan membawanya ke dalam desain ini. Bukan skeuomorphic atau apapun, tapi hanya anggukan pada dimensionalitas.

Kami membuatnya menjadi dua halaman terbentang dan menggunakan gradien untuk mengisyaratkan bayangan dan penjilidan. Kami bermain dengan beberapa bayangan untuk memperluas efeknya.

Sekali lagi memperluas metafora "buku", kami memilih font tulisan tangan untuk menunjukkan huruf-huruf dalam buku, membuatnya lebih seperti jurnal atau buku harian daripada buku yang saya sukai.

Area ini dibagi menjadi dua (yang berfungsi baik dengan tata letak 2 halaman). Satu sisi untuk properti CSS dan sisi lainnya untuk pemilih CSS. Untuk membantu membuatnya lebih jelas secara visual (lebih dari sekadar memberi judul pada dua halaman) kedua sisi memiliki warna dasar yang berbeda.

Kami memikirkan tipografinya sedikit dan bergumul dengan beberapa keputusan tentang di mana kami bisa lolos dengan font tulisan tangan ini dan di mana kami tidak bisa. Kami juga sedikit bergumul dengan fakta bahwa kami telah (lagi) menggunakan seluruh halaman untuk eksplorasi konten. Hal yang baik, tentu saja, tetapi sekali lagi kami telah menghapus iklan yang cukup penting untuk kelangsungan situs.