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.CSS Type Set
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
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.PXtoEM Conversion
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ı.CSSTXTMetinlerinize stil atayabileceğiniz bir başka uygulama.CSS Anahat Oluşturucuları
YUI – CSS Grid Builder
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 Builder
YAML tabanlı CSS anahatları oluşturabileceğiniz bir görsel anahat oluşturucusu.iStylrÇevrimiçi CSS Şablon Oluşturucusu.Grid Designer
Izgaralar ve Tipografiler oluşturabileceğiniz bir araç.CSS OluşturucusuBu 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.Drawable Markup Language
Web sitenizin kodunu neredeyse çizebilmenize olanak sağlayan bir uygulama.CSSMateİnteraktif çevrimiçi CSS düzenleyicisi CSSMate sayesinde CSS stilleri oluşturabilirsiniz.QrONE CSS DesignerCSS Stil düzenleyicisi.CSS Frame Generator
XHTML altyapınız üzerinde CSS çerçeveleri oluşturabileceğiniz basit bir araç.XHTML/CSS Markup GeneratorXHTML/CSS kodlama hızınızı ilerletmeye yardımcı olacak bir uygulama.Sky CSS ToolSky CSS neredeyse hiç kod yazmadan CSS sınıfları oluşturabilmenizi sağlıyor.CSS Creator – CSS GeneratorCSS Creator, web sayfanız için bir stil seçebilmenizi sağlıyor.CSS Grid CalculatorCSS Izgara Hesaplayıcısı’nı kullanarak sayfa anahattınızı çabucak görselleştirebilir ve çeşitli yollar kullanarak ızgaralar çizebilirsiniz.CSS GeneratorBu araç basit bir stil şablonu oluşturabilmenizi sağlıyor.Dynamic 3 Column Layout Generator3 sütunlu anahatlar oluşturabilmenizi sağlayacak kullanışlı bir araç.Construct Your CSSWYSIWYG anahat düzenleyicisi. Semantic ve tablo kullanmadan.Blueprint Grid CSS GeneratorBu 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
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.Hartija – CSS Print FrameworkWeb yazdırması için kullanılabilecek evrensel CSS çatısı.ElementsTasarımcıların daha hızlı CSS yazabilmeleri ve daha verimli olabilmeleri için geliştirilmiş.960 Grid System
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 FrameworkLogic 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.SenCSsSenCSs sayesinde anahat dışındaki her şey için standart CSS dosyasını kullanabilirsiniz.TripoliTripoli, 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 CSS Çatısı
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.Grids CSS
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
Code Beautifier
Çevrimiçi CSS biçimleyicisi ve düzenleyicisi.Clean CSS
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.CSS SuperScrubBu 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.Online CSS OptimizerÇ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.Online CSS OptimizerBir 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ştiricisiBu 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.Format CSS OnlineCSS’nizi otomatik olarak biçimlendirerek onu daha kolay okunur ve düzenlenebilir hale getirin.PrettyPrinterÇevrimiçi kod güzelleştiricisi.TabifierTabifier sayesinde bilgisayar kodunuzu daha okunaklı hale getirebilirsiniz.Doğrulama
W3C CSS Doğrulama Servisi
W3C CSS Doğrulama Servisi, web tasarımcılarının ve web geliştiricilerinin CSS dosyalarını kontrol edebilmelerini sağlıyor.CSS AnalyserBu 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.CSS Redundancy CheckerHTML dosyalarınızda kullanılmayan CSS seçicilerini bulmak için kullanabileceğiniz bir araç.CSS Formları
JotForm
İlk WYSIWYG Form Oluşturucusu. Tarayıcınızı kullanarak web formları oluşturun ve yayımlayın.Wufoo
Wufoo, web üzerinden bilgi toplamanızı kolaylaştırıyor.FormSmartsFormSmarts üzerinden formlar oluşturup onları yayımlayarak ziyaretçilerinizden çeşitli alanlarda bilgi toplayabilirsiniz.FormAssemblyWeb Formları Oluşturun ve sorularan verilen yanıtları toplayın.Navigasyon
CSS Menu Builder
Web standartları ile uyumlu XHTML / CSS menüleri oluşturun.CSS Menu GeneratorCSS Menü Oluşturucusu sayesinde ortalama bir web yöneticisi, çapraz tarayıcı uyumlu web site menüleri oluşturabilir.TabCreatrÜcretsiz CSS Menü Oluşturucusu.CSS Sıfırlama
Reset CSSSı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 CSSYahoo!’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ğiTemel bir stil şablonu.Boş CSS Anahatları
168 Adet Izgara ve CSS Anahat KolleksiyonuBu 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___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.The Only CSS Layout You NeedTamamı aynı HTML dosyasını kullanarak oluşturulmuş 10 farklı anahattı ve örnek sayfalarını içeren bir anahat.Little BoxesTarayıcı bazlı CSS sorunları için hileler.Diğer Araçlar
PSD 2 CSS OnlineSaniyeler içerisinde Photoshop tasarımlarınızdan dinamik web sayfaları oluşturun.Conditional CSSBu araç sayesinde belirli tarayıcıları hedefleyen CSS kodları yazabilirsiniz.CSS EvolveBu araç sayesinde bir web sitesinin rengi, şeması, yazıtipleri, sınırları gibi elementleri üzerinde oynayabilirsiniz.CSS Text WrapperCSS Text Wrapper sayesinde bir HTML metnininin düz köşeleri olmayan bir görseli sarmalamasını sağlayabilirsiniz.The Box OfficeYukarı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 EssentialsCSS İ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
