Arayüz geliştiriciler için 10 online CSS3 aracı
Temmuz 13, 2012 12:50
Arayüz geliştirme güncel tarayıcıların yanına Internet Explorer 9’un da katılmasıyla birlikte geçmiş yıllara oranla daha kolay bir hale geldi. Yuvarlatılmış köşeler, gölge efektleri, renk geçişlerinin imaj kullanılmadan yapılabilmesi web sitelerinin daha hızlı olmasını sağlarken, geliştiriciler için de daha standart kodlar yazabilmesine imkan veriyor.
Webkit ve gecko kullanan web tarayıcıları için farklı farklı kod blokları yazılıyor olsa da aşağıda listesini yaptığımız araçlar sayesinde arayüz kodlamalarınızı daha hızlı yaparken standartlara uyumlu kodları daha kolay bir şekilde oluşturabilirsiniz.
1) CSS3 button maker – Chris Coyier
CSS3’ün gradient, border-radius özelliklerini kullanarak vakit kaybetmeden CSS3 butonlar oluşturabilirsiniz.
2) Button X – Onur Adsay
Chris Coyier’in buton oluşturma aracına göre daha fazla özellik barındıran, css3 ile birlikte gelen box-shadow ve text-shadow’u da kullanarak butonlarınızı oluşturabilirsiniz.
3) Border-radius – Jacob Bijani
HTML objelerinin kenarlarını yumuşatmak için kullanılan border-radius kodunu kolayca oluşturmanızı sağlayan bir araç.
4) CSS3 Generator – Randy Jensen
CSS3 ile birlikte gelen birçok özelliği (Border-radius, Box shadow, Text-shadow, RGBA, font-face, Multiple Columns, Box-resize, Box-sizing, Outline, Transitions, Transform) tek bir yerden oluşturabilirsiniz.
5) CSS3 Gradient Generator – Alex Sirota
IE9 destekli sadece CSS kullanarak geçişli renk blokları oluşturmanızı sağlıyor.
6) Layer Styles – Felix Niklas
Photoshop’un Layer Stil penceresine benzeyen bir arayüzle, gölge ve kenar yumuşatmak için CSS kodlarınızı üretebilirsiniz.
7) CSS Prefixer – Lea Verou
Yazdığınız CSS3 kodlarının destekleyen tüm tarayıcılarda (webkit gecko) aynı şekilde görüntülenmesi için gereken kodları oluşturur.
8) CSS3 Generator – Peter Funk
Basit ve detaylı bir arayüz sunan CSS3 generator Border-radius, box-shadow, gradient, opacity içeren kod bloklarını kolayca oluşturmanızı sağlar.
9) Ceaser – Matthew Lein
Güncel tarayıcılar için CSS animasyonlar oluşturabilmenizi sağlayabilirsiniz.
10) CSS3 Typeset Style Generator – Sciweavers
Dilerseniz CSS3 ‘ün yazı özelliklerini kullanarak stillerinizi oluşturabilir dilerseniz sunulan galeriden örnek stilleri de deneyebilirsiniz.
Listede olmayan ancak sizin de tavsiye edeceğiniz CSS araçlarını yorumlarda bizimle paylaşabilirsiniz.
13 Temmuz 2012, 12:57
Yazıyı bir yazılımcı olarak çok faydalı buldum. Ancak bazı noktaların atlanmış. Bu işe yeni soyunan kişilerin faydalanabilmesi için daha fazla ayrıntı olması gerekiyordu. Saygılar…
13 Temmuz 2012, 14:37
Webrazzi şaşırtı bildirgec zamanları geldi aklıma. O eski popüler olduğu zamanlar. Beklemezdik ama hadi hayırlısı.
13 Temmuz 2012, 16:21
Harbiden başlığı görür görmez benmimde aklıma hemen emektar bildirgeç geldi. Webrazzi çizgisinden uzak bir yazı gibi geldi.
Olkunmustafa dedi ki:
13 Temmuz 2012, 15:16
Bu araçlardan sadece borderadiuw.com’u kullanıyordum. Gerçekten diğer araçlarda çok işimize yarayacak araçlar. Özellikle cssprefixer düzgün çalışıyorsa harika bir araç olacak. Ancak ne var ki hala ie9 bile css3 standartlarının tamamını desteklemiyor ve hatta önemli bir kısmını desteklemiyor diyebilirim. Hala ie9 öncesi explorer kullanan insanlarda olması biz geliştricileri daha çok jquery kullanmaya zorluyor
13 Temmuz 2012, 16:40
Jeffrey Way’in geliştirdiği Prefixr’de hiç fena değil. Sublime text uyumu ile örneğin border-radius: 5px yazıyorsunuz, cross browser kardeşlerini kendisi getiriyor. Time=Money 😉 http://prefixr.com/
14 Temmuz 2012, 22:00
“hey gidi bildirgec günleri hey” diyecekken yorumlarda herkesin dediğini gördüm.
arada görelim bu tür yazıları. keyifle okuyoruz.