bildirgec.org

css popup image wiever

Tasarımcıların en can sıkıcı sorunu ie ,firefox ,safari ve ie farklı versiyonları için tasarım farklılıklarıdır bunun en önemli nedeni ie6 gibi eski browserların kullanımının devam etmesi uyumluluk sorunları hakkında bir çok makale var mesela reset dosyası kullanmak, farklı tarayıcıların desteklediği kodlardan kaçınmak, ie 6 dan css kodlarımızı gizlemek ve bana da en mantıklı gelen bu css’i kullan <-- if [enif] --> önce kullanıcının tarayıcı özelliklerinin öğrenip ona göre farklı css dosyası dahil etmek… bu tarz sorunlardan kurtulduktan sonra uygulayabileceğimiz css örnekleriyle dolu bir kaynaktan söz etmek istiyorum işte :
Dynamic drive CSS kütüphanesi bu kaynakta CSS , jquery ile ilgili bir çok örnek uygulama ve kaynak kodu mevcut örneğin:
CSS ile submit buton tasarımı

css submit form

Div ve yorum kutuları

css comment box

CSS popup menu resim galeri

css popup image wiever

daha bir çok örnek uygulama kütüphaneleri mevcut artık herkes css’ci olacak 🙂 CSS Kütüphanesine buradan ulaşabilirsiniz …

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

Typetester

Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.

Em Calculator

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.

• Masaüstü Yazılımı
• Çevrimiçi Sürümü

css konusuyla ilgiliyseniz muhtemelen css reset (sıfırlama) tekniğini duymuşsunuzdur. Daha önce css sıfırlama dosyası yazısında da bahsettiğim bu teknik, web sitenizin cross browser uyumluluğu açısından çok yararlı bir tekniktir.

Fakat internette bu konuda araştırma yapınca farklı css reset teknikleriyle karşılaşabiliyorsunuz. İşte tam bu sayfada bunların en popülerleri bir araya toplanmış ve kısa kısa açıklaması yapılmış. incelemenizi tevsiye ederim.

Herşeyi sıfırlayın !

CSS ile tasarladığım sayfanın farklı tarayıcılarda aynı sonucu vermesini sağlamak için, en başta bütün elemanları sıfırlarım. CSS dosyasının en başına yazdığım * { margin:0; padding:0 } kodu ile özellikle Header (h1, h2, h3, …) elemanlarındaki boşluk sorunu çözülmüş olur. Bu yöntemi buradaki sayfadan öğrenmiştim.

Meğer bu herşeye çare değilmiş 🙂 Biraz daha ayrıntılı bir kod gerekiyormuş. Yahoo‘nun Developer (Geliştici) sayfasında bulduğum sıfırlama dosyası beni muradıma erdirdi 🙂