# 97: Almanak'ın Photoshoplanması - CSS Hileleri

Anonim

Almanak v9'da başlatılan ve hiçbir zaman tam olarak yapılamayan bir şeydi. Her geçen gün daha da yaklaşıyor. Dolayısıyla, v10'da "bitti" varsayımı etrafında tasarım yapacağız.

Tamamen iyi olan ancak içeriğe çok iyi hizmet etmeyen mevcut v9 tasarımına bakıyoruz. Hızlı bir şekilde bir kenara, fareyle üzerine gelindiğinde kalın harflerin rollover'larının genellikle hayır-hayır olduğunu (genellikle diğer metni uzağa iter ve tuhaf görünür), ancak bu kilitli konumlu harfler üzerinde harika bir etki olduğunu görüyoruz.

Özel başlık grafiğine zaten sahibiz, bu yüzden bunu Photoshop'a koyarız, böylece tasarımla bağlam içinde kurcalayabiliriz. Giovanni'nin illüstrasyonundan hoşlandığım şeylerden biri de bana büyüdüğüm yerde yaygın olan fiziksel kitabı hatırlatması: Çiftçinin Almanak'ı. Fiziksel kitap metaforunu alıp bu tasarıma dahil etmeye karar veriyoruz. Skeuomorphic veya başka bir şey değil, sadece boyutsallığa bir selam.

Bunu iki sayfaya yayarız ve gölge ve ciltlemeye ipucu vermek için degradeler kullanırız. Efekti genişletmek için bazı gölgelerle oynuyoruz.

Yine “kitap” metaforunu genişleterek, kitaptaki harfleri göstermek için bir el yazısı fontu seçiyoruz, bu da onu benim hoşuma giden kitaptan çok bir günlük veya günlük yapıyor.

Bu alan ikiye bölünmüştür (2 sayfalık düzen ile uyumludur). Bir taraf CSS özellikleri için, diğer taraf CSS seçiciler içindir. Bunu görsel olarak daha net hale getirmeye yardımcı olmak için (sadece iki sayfaya başlık koymanın ötesinde) iki tarafın farklı bir temel rengi vardır.

Tipografiyi biraz düşünüyoruz ve bu el yazısı yazı tipinden nereye kaçabileceğimiz ve nerede yapamayacağımız konusunda bazı kararlarla boğuşuyoruz. Ayrıca, (tekrar) tüm sayfayı içerik araştırması için kullandığımız gerçeğiyle biraz boğuşuyoruz. Elbette iyi bir şey, ancak bir kez daha sitenin hayatta kalması için oldukça hayati önem taşıyan reklamları kaldırdık.