Arayüz geliştiriciler için 10 online CSS3 aracı
Arama
Web Tarayıcılari

Arayüz geliştiriciler için 10 online CSS3 aracı

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.

Yorumları GösterYorumlar Gizle (6)
  1. Naci dedi ki:

    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…

  2. Hakan Öztürk dedi ki:

    Webrazzi şaşırtı bildirgec zamanları geldi aklıma. O eski popüler olduğu zamanlar. Beklemezdik ama hadi hayırlısı.

    1. Engin E. dedi ki:

      Harbiden başlığı görür görmez benmimde aklıma hemen emektar bildirgeç geldi. Webrazzi çizgisinden uzak bir yazı gibi geldi.

  3. Olkunmustafa dedi ki:

    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

  4. Ozan Çanaklı dedi ki:

    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/

  5. erdal gökhan dedi ki:

    “hey gidi bildirgec günleri hey” diyecekken yorumlarda herkesin dediğini gördüm.
    arada görelim bu tür yazıları. keyifle okuyoruz.

Bir Yorum Yazın