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ı paylaşabilirsiniz.
Kaynak: Webrazzi
