Şeffaflık bir web sayfasına derinlik katan etkenlerden en önemlisidir ve çoğu tasarımcı web sitelerinde şaffaflığı kullanmakta zorluk çeker işte size birbirinden güzel şeffaflık konulu 35 web sayfası
ryanmcmaster.com
Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS’yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.
1- CSS Anahatları Oluşturmak
2- Stilleme ve Listeler Kullanma
sitelerinizin hemen hemen bütün bölümlerinde çeşitli css uygulamalarından yararlanmanız mümkün. imaj gösterimleri, yazı efektleri, menüler bu alanlardan bazıları. işte sitenizi daha güzel gösterecek ve daha kullanışlı hale getirecek 10 css uygulaması:
Zaman zaman bir web tasarım ya da geliştirme projesi üzerinde çalışırken bir yardıma ya da rehbere ihtiyacınız olacaktır. Her ne kadar İnternet üzerindeki css kaynaklarının sayısı gün geçtikçe artsa da, bu yazıda CSS ile bir sorun yaşadığınızda size yardımcı olabilecek 10 adet gerçekten kullanışlı kaynağı listelemeye çalıştım.
Stack Overflow bir sosyal medya sitesi ve bir forumun kombinasyonundan oluşmuştur. Özellikle programlama ve geliştirmeye yönelik zengin içeriğe sahip bir sitedir (CSS, sitede tartışılan konulardan sadece biri). Stack Overflow’un amacı programcılara soru sorup onların sorularına cevap verebileceğiniz bir platform oluşturmak. Sitede herkes bir soru sorabilir (bir hesap bile açmanıza gerek yok) ve ardından sitedeki diğer kullanıcılar sorularınıza cevap verebilirler. Diğer kullanıcılar sitedeki cevaplara artı ya da eksi puan vererek en iyi cevabın seçilebilmesine yardımcı oluyorlar.
Günümüzde CSS kullanmayan site sayısı gittikçe azalırken buna ters orantılı olarak gelişen CSS araçlarının sayısı da gün geçtikçe artıyor. Her yeni bir araç, CSS geliştiricilerinin projeler üzerinde harcadıkları zamanı azaltmaya ve daha verimli kodlama yapmalarını hedefliyor.
İşte tam da bu noktada Back to Essentials web sitesi, İnternet üzerindeki CSS araçlarına yönelik bir liste hazırlamış. Ben de ilgilenen bildirgec okurları için bu yazıyı yayımlama gereği hissettim. Umarım işinize yarar.
Yazıtipleri
Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.
Em Calculator, küçük bir JavaScript aracı olup genişletilebilir ve erişilebilir CSS tasarımları oluşturmanıza yardımcı oluyor. Pixel değerindeki verileri bağıl em birimlerine dönüştürüyor.
“Eğer düzenli olarak web siteleri oluşturan ve geliştiren kişilerden biriyseniz, o zaman şablon (template) oluşturma, kullanışlı kodları arşivleme ve bunun gibi diğer şeyler hakkında düşünmeye başlamalısınız. Özellikle bu gibi şeyleri geliştirme işlemi süresini kısaltmak için yapmalısınız, bu sayede her yeni bir proje başlangıcında bu şablon üzerinde gerekli değişiklikleri yaparak aynı şeyleri tekrar tekrar yazmak zorunda kalmazsınız. Ancak bu tip kod parçacıklarını ya da başkaları tarafından hazırlanmış eserleri projenizde kullanmaya başlamadan önce mutlaka ama mutlaka indirdiğiniz ürünün lisans sözleşmelerini okuyun… Pek çok geliştirici ve tasarımcı, Internet üzerinden ücretsiz olarak dağıttıkları içeriği çoğunlukla bireysel kullanımlar için ücretsiz, kurumsal kullanımlar için ücretli olarak yayımlarlar.
Yazımın devamında kendimce en iyilerin en iyilerini derlediğim ve web tasarımcıları için gerçekten kullanışlı 12 css framework’ünü, şablonunu ve kod sitesini bulacaksınız.
1. CSSTidy
“CSSTidy açık kaynaklı bir CSS bölümleyicisi ve optimize edicisidir. Komut satırı üzerinden kontrol edilebilen ve Windows, Linux ve Mac için ayrı ayrı sürümleri bulunan bu uygulamanın ayrıca bir PHP betiği de bulunuyor. Gerek masaüstü yazılımı gerekse de PHP betiği aşağı yukarı aynı özelliklere sahip.
Pek çok diğer CSS bölümleyicisinin aksine herhangi bir kurallı ifadenin kullanılmamış olması, tam CSS2 desteği ve yüksek kararlılığı ile CSSTidy, benzerlerinden ayrılıyor.”
Bu bilgiyi kendi siteleri üzerinden çevirdim, zira her şeyi benim açıklayabileceğimden çok daha iyi özetlemiş.
Bazı insanlar derhal şu soruyu sorabilirler: Neden CSS kodumu optimize etmeliyim? Sadece kodunuzun daha temiz olmasının yanısıra ilgili kodları yüklediğiniz sayfaların daha hızlı açılması gibi nedenler hem ziyaretçilerinizi hem de sizi memnun edeceğinden, kodunuzu optimize etmemeniz için herhangi bir sebep bulunmamaktadır.
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.
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 ile menüler yapımı konusunda internette onlarca ücretsiz kaynağa rastlamak mümkün. şurada çeşitli örnekler görebilir; şurada ve şurada kendiniz için menüler yapabilirsiniz. konuyla ilgili bir diğer güzel kaynak ve yazımızın konusu da css menu builder.
sunulan menüleri yine site üzerinden düzenleyerek 1000’in üzerinde farklı kombinasyon oluşturabilirsiniz. menünün biçimini, arkaplan rengini, linkleri belirleyebilir daha sonra sitenin verdiği kodları kendi tasarımınızın kodlarına ekleyerek menüleri kullanabilirsiniz.
Bu adreste CSS Mania`dan css Zen Garden`a tam 74 adet css ile hazırlanmış web sitelerinden oluşan galeri ve kısa açıklamaları yer alıyor.
