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.
CSS Type Set sayesinde tasarımcılar ve geliştiriciler, sitelerinde kullanacakları metin bloklarının çeşitli CSS değerleri kullanıldığında nasıl görüneceğini eş zamanlı olarak görüp en doğru tercihi yapmalarına yardımcı oluyor.
Font Tester bir diğer ücretsiz çevrimiçi yazıtipi karşılaştırma aracı. Çeşitli CSS yazıtipi stilleri atanmış farklı yazıtiplerini yan yana karşılaştırmanıza olanak sağlıyor.
Pixel değerlerini EM'e dönüştürebileceğiniz bir diğer kullanışlı araç. BODY etiketine atadığınız yazıtipi boyutunu pixel olarak girin ve site size farklı em değerlerini içeren tabloyu versin. Gerçekten kullanışlı.
Metinlerinize stil atayabileceÄŸiniz bir baÅŸka uygulama.
CSS Anahat Oluşturucuları
CSS Izgara Oluşturucusunun basit web tabanlı arayüzü sayesinde YUI'nin CSS dosyalarına bağlı dilediğiniz sayıda anahattı kolayca oluşturabilirsiniz.
YAML tabanlı CSS anahatları oluşturabileceğiniz bir görsel anahat oluşturucusu.
Çevrimiçi CSS Şablon Oluşturucusu.
Izgaralar ve Tipografiler oluşturabileceğiniz bir araç.
Bu oluşturucusu sayesinde esnek ya da sabi genişliğe sahip yüzen sütunlu anahatlar oluşturabilirsiniz. Site 3 adede kadar sütun, başlık ve altlık içeren anahatları destekliyor. Değerler pixel, em ya da yüzde olarak girilebilir.
Web sitenizin kodunu neredeyse çizebilmenize olanak sağlayan bir uygulama.
İnteraktif çevrimiçi CSS düzenleyicisi CSSMate sayesinde CSS stilleri oluşturabilirsiniz.
CSS Stil düzenleyicisi.
XHTML altyapınız üzerinde CSS çerçeveleri oluşturabileceğiniz basit bir araç.
XHTML/CSS kodlama hızınızı ilerletmeye yardımcı olacak bir uygulama.
Sky CSS neredeyse hiç kod yazmadan CSS sınıfları oluşturabilmenizi sağlıyor.
CSS Creator, web sayfanız için bir stil seçebilmenizi sağlıyor.
CSS Izgara Hesaplayıcısı'nı kullanarak sayfa anahattınızı çabucak görselleştirebilir ve çeşitli yollar kullanarak ızgaralar çizebilirsiniz.
Bu araç basit bir stil şablonu oluşturabilmenizi sağlıyor.
Dynamic 3 Column Layout Generator
3 sütunlu anahatlar oluşturabilmenizi sağlayacak kullanışlı bir araç.
WYSIWYG anahat düzenleyicisi. Semantic ve tablo kullanmadan.
Bu araç, Blueprint'in grid.css, compressed.css ve grid.png dosyalarının özelleştirilebilir sürümlerini oluşturabilmenizi sağlıyor.
CSS Çatıları
Blueprint bir CSS çatısı olup CSS geliştirirken harcadığınız zamanı azaltmayı hedefliyor.
Yet Another Multicolumn Layout
Yet Another Multicolumn Layout (YAML), bir diğer (X)HTML / CSS çatısı olup modern ve özelleştirilebilir yüzen anahatlar oluşturabilmenizi sağlıyor. Yapısı, programlamasında son derece değişken ve son kullanıcılar için tümüyle erişilebilir.
Web yazdırması için kullanılabilecek evrensel CSS çatısı.
Tasarımcıların daha hızlı CSS yazabilmeleri ve daha verimli olabilmeleri için geliştirilmiş.
960 Izgara Sistemi web geliştirmesi sırasında harcayacağınız zamanı, 960 pixellik genişliğe dayalı sık kullanılan ölçüler kullanarak kısaltmayı hedefliyor.
Logic CSS çatısı bir dizi CSS dosyası ve PHP aracından oluşmuş, web standartları ile uyumlu xHTML anahatları oluştururken geçirdiğiniz zamanı kısaltmayı hedefleyen bir uygulama.
SenCSs sayesinde anahat dışındaki her şey için standart CSS dosyasını kullanabilirsiniz.
Tripoli, HTML işleme için geliştirilmiş bir CSS standardıdır. Tarayıcı standartlarını sıfırlayıp yeniden inşa ederek, web projeleriniz için çapraz tarayıcı uyumlu bir temel üzerinde web projelerinizi inşa edebilmenizi sağlar.
BlueTrip web sitesi inşa edebilmek için bir dizi stil ve yöntem sunarak, işin zaman harcatan kısmını geçip projenize odaklanabilmenizi sağlıyor.
Yahoo! tarafından geliştirilen ve dört ön tanımlı sayfa genişliği, altı ön tanımlı şablon ve dört sütuna kadar alt-bölümleri içeren anahatları geliştirebilmenize olanak sağlayan bir CSS çatısı. Oldukça kapsamlı ve genişletilebilir.
Biçimleyiciler, İyileştiriciler ve Sıkıştırıcılar
Çevrimiçi CSS biçimleyicisi ve düzenleyicisi.
CSS'nizi farklı sıkıştırma ayarları kullanarak optimize edebilmenizi ve biçimlendirebilmenizi sağlıyor. Bu araç sayesinde okunması daha kolay CSS kodlarına ulaşabilirsiniz.
Bu araç CSS'nin karmaşıklığını gereksiz içeriği silerek, önemsiz kodları kaldırarak ve geri kalan element isimlerini zeki bir şekilde gruplayarak azaltmayı hedefliyor.
Çevrimiçi CSS İyileştiricisi sayesinde CSS dosyalarınızın dosya boyutunu azaltabilirsiniz.
CSS Drive Gallery - CSS Compressor
İhtiyacınıza göre değişen 3 farklı sıkıştırma ayarından birini seçerek CSS dosyalarınızı sıkıştırabilirsiniz.
Bir başka çevrimiçi CSS iyileştiricisi, CSS kodunuzun dosya boyutunu azaltmayı hedefliyor.
Robson - CSS Sıkıştırıcısı
Bu CSS sıkıştırıcısı stil şablonlarına önemli değişiklikler uyguladığından ve henüz geliştirme aşamasında olduğundan, bazı CSS dosyalarında verimli çalışmayabilir.
FlumpCakes - Çevrimiçi CSS İyileştiricisi
Bu araca yükleyeceğiniz CSS dosyası işleniyor ve gereksiz tüm kodlar kaldırılarak daha temiz bir koda ulaşmanız sağlanıyor.
CSS'nizi otomatik olarak biçimlendirerek onu daha kolay okunur ve düzenlenebilir hale getirin.
Çevrimiçi kod güzelleştiricisi.
Tabifier sayesinde bilgisayar kodunuzu daha okunaklı hale getirebilirsiniz.
DoÄŸrulama
W3C CSS Doğrulama Servisi, web tasarımcılarının ve web geliştiricilerinin CSS dosyalarını kontrol edebilmelerini sağlıyor.
Bu servis CSS dosyalarınızın doğruluğunu W3C'nin doğrulama servisi üzerinden kontrol edip, bunun yanısıra kontrast testi ve boyut testi gibi bazı farklı testleri de uyguluyor.
HTML dosyalarınızda kullanılmayan CSS seçicilerini bulmak için kullanabileceğiniz bir araç.
CSS Formları
İlk WYSIWYG Form Oluşturucusu. Tarayıcınızı kullanarak web formları oluşturun ve yayımlayın.
Wufoo, web üzerinden bilgi toplamanızı kolaylaştırıyor.
FormSmarts üzerinden formlar oluşturup onları yayımlayarak ziyaretçilerinizden çeşitli alanlarda bilgi toplayabilirsiniz.
Web Formları Oluşturun ve sorularan verilen yanıtları toplayın.
Navigasyon
Web standartları ile uyumlu XHTML / CSS menüleri oluşturun.
CSS Menü Oluşturucusu sayesinde ortalama bir web yöneticisi, çapraz tarayıcı uyumlu web site menüleri oluşturabilir.
Ücretsiz CSS Menü Oluşturucusu.
CSS Sıfırlama
Sıfırlama stil şablonlarının hedefi, farklı tarayıcılar arasındaki tutarsızlıkları gidermektir. Bunlar arasında öntanımlı satır yükseklikleri, marjlar ve başlıkların yazıtipi boyutları gibi elementler yer alır.
Yahoo! UI Kütüphanesi: Reset CSS
Yahoo!'nun sunduğu bu CSS sıfırlaması da farklı HTML elementleri arasındaki tutarsız CSS stillerimini sıfırlayarak daha tutarlı web siteleri inşa edebilmenizi sağlıyor.
Master Stylesheet: En Kullanışlı CSS Tekniği
Temel bir stil ÅŸablonu.
Boş CSS Anahatları
168 Adet Izgara ve CSS Anahat Kolleksiyonu
Bu CSS anahatları tüm A sınıfı tarayıcılar için desteği içeriyor. Bunun anlamı tüm bu örneklerin Internet Explorer 6, Internet Explorer 7, Firefox, Opera, Safari ve diğerlerinde aynı şekilde görünecek olması.
42 Adet Sahte Sütunlu CSS Anahatları
53 Adet Sabit Genişlikli CSS Anahatları
___layouts dosyası dilerseniz tam yakınlaştırma desteğine sahip ya da sabit genişliğe sahip beş adet ön tanımlı şablonu içeriyor.
Tamamı aynı HTML dosyasını kullanarak oluşturulmuş 10 farklı anahattı ve örnek sayfalarını içeren bir anahat.
Tarayıcı bazlı CSS sorunları için hileler.
Diğer Araçlar
Saniyeler içerisinde Photoshop tasarımlarınızdan dinamik web sayfaları oluşturun.
Bu araç sayesinde belirli tarayıcıları hedefleyen CSS kodları yazabilirsiniz.
Bu araç sayesinde bir web sitesinin rengi, şeması, yazıtipleri, sınırları gibi elementleri üzerinde oynayabilirsiniz.
CSS Text Wrapper sayesinde bir HTML metnininin düz köşeleri olmayan bir görseli sarmalamasını sağlayabilirsiniz.
Yukarıdaki araçla aşağı yukarı aynı işlemi yapan bir başka uygulama.
Eğer sizin de bu listede yer almayan ancak faydalı olduğunu düşündüğünüz bir CSS aracı varsa yorumlarınızda belirtmeyi ihmal etmeyin.
- Kaynak: Back to Essentials
CSS İle İlgili Yazdığım Diğer Yazılar
- Onlarsız Yapamayacağınız 20 Tipografi Uygulaması
- Ücretsiz ve Yüksek Kaliteli 100 XHTML/CSS Şablonu
- Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları
- 960.gs CSS Çatısına Yakından Bakış
- CSS'de Uzman Olmanızı Sağlayacak 20 CSS Dersi
- Web Tasarımcıları İçin 12 Araç ve Site
- Woork'ten Ücretsiz El Kitabı
- Daha Hızlı Şablon Oluşturabilmek İçin Kullanılabilecek 8 CSS Çatısı
- Öğrenilmesi Gereken 15 CSS Hilesi
- Web Tasarımcıları İçin Kullanışlı 12 CSS Framework'ü, Şablonu ve Kod Sitesi
- Web Tasarımcıları İçin Web Üzerindeki 6 Kullanışlı Araç
- 10 Kullanışlı Web Uygulaması Arayüzü Tekniği
- Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği
- Modern CSS'de Altın Oran
- Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu
- Pixelleri Emlere Kolayca Dönüştürün
- Web Tasarımında Altın Oran
- Blueprint CSS Framework'ünü Kullanmak
- SenCSs: Layout Dışındaki Herşey İçin CSS Framework'ü
Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın
