bildirgec.org

CSS’yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop’taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS’nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

Beyaz Boşluk (White Space) Nedir?

Basitçe anlatmam gerekirse beyaz boşluk bir tasarımın farklı elementleri arasındaki boşluktur – metinler, resimler, paragraflar, başlıklar, altlıklar, bağlantılar vb. Bu boşluk bir sayfa üzerindeki farklı elementler arasındaki boşluktur, harfler arasındaki boşluk, bir paragrafın satırları arasındaki boşluktur.

Beyaz boşluk bir web sitesinin kolayca taranabilmesini sağlar. Ziyaretçinin sitenizi ziyaret ettiğinde gördüğü metin miktarını azaltır ve bu vesileyle okumayı daha da kolaylaştırır. Sayfanıza kutular ve çizgiler gibi yeni elementler eklemenize gerek kalmadan tasarım elementlerinin görsel olarak ayrımını kolaylaştırır. Bu boşluklar doğru kullanıldığında sayfanızın temiz ve profesyonel görünmesini sağladığı gibi, sitenizin karmaşık görünmemesini, taze görünümünü korumasını sağlar.

Beyaz boşluk ne yazık ki güçlü bir web tasarımında en az dikkate alınan elementlerden birisidir. Beyaz boşlukların parlak ve ışıldayan bir tasarımının olmamasının, onun web sitesi için önemli olmadığı anlamına gelmez.

Bu konudaki araştırmamıza başlamadan önce gelin tasarımlarında beyaz boşlukları verimli bir şekilde kullanan bazı web sitelerine bir göz atalım.

• 1. Made By Sofa

Made By Sofa web sitesi, sitenin üst kısmında büyük boyutlu bir imaj ve imajın alt kısmında ana içerik ve navigasyon öğeleri kullanılarak güçlü bir tasarım oluşturmuş. Sofa başlıklar, paragraflar ve slogan elementlerini birbirinden ayırmak için beyaz boşlukları kullanmış. Aşağıdaki yakınlaştırılmış resme bir bakın:

css, yeni nesil web tasarımı için neredeyse kaçınılmaz hale geldi. Esneklik, tasarım güzelliği ve diğer pek çok nedenden ötürü artık css pek çok tasarımcının gözdesi konumunda.

Nope sitesi 40’dan fazla ders, ipucu ve örneği toplayarak harika bir liste hazırlamış. Bu listede pek çok yararlı css tekniğine ilişkin ders, yöntem bulmanın yanısıra; size ilham verecek harika tasarımlar göreceksiniz.