Kullanışlı CSS Araçları

 CSS artık web tasarımla uğraşan herkesin ilgi alanına giriyor. Hatta web tasarımla uğraşmayan, benim gibi bir bloga sahip olan veya internet ile haşır neşir olan insanların bile günlük kullandıkları bir yapı haline geldi. WordPress temaları sanırım buna en güzel örnek olacaktır. internette birçok kaynak bulunmasına rağmen CSS’i tam anlamı ile bilmek pek mümkün olmuyor. Çünkü çok farklı teknikler gerebiliyor bazen. Bu farklı tekniklerin dışında kullanılan standart yapı içinse internette birçok kullanışlı araç yer alıyor. Form araçlarından, seçicilere onda katman yerleşimlerine kadar işe yarayadığını düşündüğüm araçları yazının devamında göreceğiz.
Alan ve Alan Yerleşim Araçları
Oluşturduğumuz alanlar bazen istediğimiz gibi olmaz. Ya ölçülerinde hata yaparız ya da float’ı kullanıdığımız yaslamalarda sorun çıkabiliyor karşımıza. Bu başlık altında zorlanmadan alan oluşturma ve yerleşimlerinin kolayca yapılmasını sağlayan servislere göz atacağız.

builder.yaml.de: Bir sitede ya da WordPress’e yakınsanız oradan örnek vereyim bir temada mutlaka header(üst kısım), sidebar(yan), content(içerik), footer(alt) kısımlar bulunur. Bu servis bütün bunları istediğimiz ölçüde ve istediğimiz hizalama ile sitemizin iskeletini oluşturmamıza olanak sağlıyor. Ayrıca servisi açtığımızda karşımıza gelen küçük pencerede yer alan “add elements” sekmesinde başlık, paragraf gibi nesneleri ekleyerek sitemizin kafamızda canlandırdığımız kısmını görmemizi de sağlıyor. Benim kesinlikle en sık başvurduğum servislerden birisidir.

Layout-o-Matic: Bu servisde Yaml’in yaptığı işlevi görüyor ancak onun kadar esneklik sağladığını söyleyemem. Yaml’den artısı ise girdiğimiz değerler karşısında ayarladığımız taslağımızı “download” butonuna bastığımız taktirde bilgisayarımıza indirmek oluyor.

CSS Creator: Yine alan oluşturabiliyor ve yerleşimini yapabiliyoruz bu servis aracılığıyla. Diğerlerinden farkı ise istediğimiz bölüme renk paleti sayesinde renk atayabilmek oluyor.

Free CSS Template Code Generator: Burada ise yine değerlerini girdiğimiz taslağı “generate” butonuna basarak önizleme yapabiliyoruz. Hazır olarak kodlarını da servis bize sunuyor.

CSS Source Ordered: istediğimiz kolon sayısına sahip taslaklar oluşturmak için birebir. Ayrıca istediğimiz sayıda footer bölgesi de ayırabiliyoruz.

QrOne CSS Desinger: Servisi ayrıcalıklı kılan özelliği diğerlerinde mevcut olmayan margin, padding, z-index(katman), yazı tipi ve position değerlerinin atanabilme yeteneğine sahip olması. Yaml’den sonra ikinci tercihim

Form Araçları

Bazen formları daha değişik tasarlamak isteriz. Ancak tasarlasak da kodlaması işkenceye dönüşebilir. Formlar için de araçlar mevcut.

JotForm: Bu servisin kullanımı ile ilgili daha önce şurada yazdığım makaleden dolayı tekrar açıklama yapmayı lüzumlu görmüyorum.
Accessible form builder: Div ve tablo seçeneklerine göre form hazırlamamıza imkan sağlayan bir servis.

Free CSS Form Layout Code Generator: Kutucuklara istediğiniz değerleri girdikten sonra formumuzun kodunu veren güzel bir servis.

Yazı Tipi Araçları
CSS Builder: Yazı tipi, rengi, dekoratifliği ve daha birçok seçeneğini isteğimize göre işaretleyebileceğimiz kullanışlı bir servis. Aynı zamanda kutu veya çerçeve de oluşturmamıza olanak sağlıyor. Ve son özelliği; liste biçiminin de ayarlanabildiği bir servis. Yine tercihlerimden birisidir kendileri

korhon Typeviewer: Yazı biçimlendirmelerini yapabileceğimiz güzel bir servis. Font, Word ve Text etiketleri için istediğimiz biçimlendirmeyi verebiliyoruz. Sitede bulunan kutucuklara istediğimiz değerleri girebildiğimiz gibi her kutucuğun üstünde yazan etiketin üzerine fare ile gelip beklediğimizde de girilebilecek değerler Dreamweaver gibi hazır olarak sunuluyor.

CSS Font and Text Style Wizard: Adı üzerinde bir sihirbazdır kendisi. Her etki etiketi için hazır değerler yer alıyor sitede. Hazır değerlere tıkladığımız zaman da sayfanın alt kısmında o etkinin ön izlemesini yapabiliyoruz. Ayrıca yazı ile resim hizalamasının yapılması da servisi ayrıcalıklı kılıyor.

Typetester: Kullandığı Ajax teknolojisi sayesinde font etkilerini listeden seçip eş zamanlı olarak alt kısımda ön izlemesini de yapabiliyoruz. Tercihlerim arasında.

Navigasyon Menü Araçları
CSS Menu Generator: Servis bünyesinde birçok hazır menüyü barındırıyor. Hem dikey hem de yatay olan menüleri “customize” linkine tıklayarak özelleştirebiliyoruz. Özelleştirme derken menü elementlerinin isimlerini kendimiz girebiliyoruz. En son işlem olarak da hazırlanan dosyayı bilgisayarımıza indirebiliyoruz.

Colly Logic CSS Rollover Generator: Kenar boşluğu, arkaplan, genişlik, yükseklik, yazı tipi ve büyüklüğü ve daha birçok değeri kendimizin seçmesini sağlayan kullanışlı bir servis. Değerleri verdikten sonra bize oluşturduğumuz menünün kodlarını teslim ediyor.

Webmaster Toolkit: Bu sayfada da birkaç biçimde dikey menüler mevcut. Bunlardan istediğimizi seçerek “proceed” butonuna basıyor ve kendi isteğimize göre biçimini ayarlayabiliyoruz. Renk, büyüklük, kenar boşluğu ve diğer temel değerleri kullanıcının ayarlamasına imkan veriyor. Hoş bir servis olduğunu söyleyebilirim.

List-O-Matic: Birkaç adımda istediğimiz gibi bir menüye sahip olmamızı sağlayan bir menü sihirbazı. Kullanımı da oldukça basit olan bu servis kendi tercihlerim arasında yer alıyor.

Optimizasyon ve Düzenleme Araçları
CSS Compressor: Mevcut CSS dosyamızın içindeki kodları kopyala yapıştır yöntemi ile sitedeki “insert CSS code” bölümüne girdiğimiz taktirde CSS dosyamızı sıkıştırıyor. Aradaki yorumları kaldırabilme özelliğine de sahip.

Tabifer CSS and HTML code Beautifier üzensiz olarak girilen CSS veya HTML kodlarını standartlara uygun bir biçimde düzenleyerek kullanıcıya sunuyor. Yine tercihlerim arasında olan bir servis.

Online CSS Optimiser: Servis yine CSS dosyamızı optimize ederek daha hızlı okunmasını sağlıyor. Diğer servislerden farkı ise bilgisayarımızda bulunan bir dosyayı yükleyerek optimize edebildiğimiz gibi internet üzerindeki herhangibir linkdeki CSS dosyasını da direkt alıp optimize edebilmesi.

Diğer Araçlar
CSS Rounded Box Generator: Oval köşeli alanlar ya da kutular web2.0 teriminin kullanılması ile birlikte yükselişe geçti. Şu an birçok sitede görmek de mümkün. Fakat hem tasarlaması hem de kodlaması bazen zaman alabiliyor. Bu servis sayesinde ne tasarım ne de kodlama için vakit kaybına uğramadan zahmetsizce oval köşeli alanlar oluşturabiliyoruz. Yine tercihlerim arasında olan bir servis.

Page Scanner Tool: istediğiniz bir site adresini servise girerek CSS yapısında kullanılan etiketlere bakabiliyoruz. Hangi tag kaç defa kullanılmış, kapatılmış mı yoksa hatalı mı olduğunu görebiliyoruz çıkan tablo sayesinde. Hataları azaltacağını düşündüğüm bir servis.

CSS Color Chart: Renk paletleri ve decimal kodlarını barındıran kullanışlı bir site. Eğer CSS’i Not Defteri gibi hazır etiketleri barındırmayan bir program ile düzenliyorsanız renkler çoğu zaman çile olmuştur. Fakat bu servis bu boşluğu fazlasıyla dolduruyor.