Tasarım yaparken bize hız kazandıracak, kendimde çok sık olmasa bazen kullandığım online css araçlarını sizlere tanıtacağım.

internette bir çok online tasarım aracı mevcut, özelliklede css ile ilgili olanları. Bu araçlar içerisinden en kullanışlı olanlarına bir göz atalım isterseniz.

border-radius.com

border-radius.com

Css yuvarlak kenarları destekleyen tarayıcıların tümünde çalışan css kodunu üretir.

css3.me

css3.me

Destekleyen bütün tarayıcılarda çalışan yuvarlak kenarlar, gölge, gradient arka plan efektlerini veren css kodunu üretir.

css3d.net

css3d.net

Resimde gördüğünüz şekilleri oluşturan html ve css kodlarını üretir.

css3generator.com

css3generator.com

Css3 ile gelen bir çok özelliğin destekleyen tüm tarayıcılarla uyumlu css kodunu üretir.

css3maker.com

css3maker.com

Css3 ile gelen bir çok özelliğin destekleyen tüm tarayıcılarla uyumlu css kodunu üretir. Oluşturduğu kodun hangi tarayıcılar tarafından desteklendiğini aynı sayfada görebilirsiniz.

css3.mikeplate.com

mikeplate

Yine aynı şeklilde Css3 ile gelen bir çok özelliği destekleyen tüm tarayıcılarla uyumlu css kodunu üretir.

cssdesk.com

cssdesk.com

Bu aracımız ise online css editörü görevini görmektedir. Aynı anda hem html hemde css kodunu yazarken değişimleri yan panelde takip edebiliyorsunuz.

cssprefixer.appspot.com

cssprefixer

    You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!

Slogandan da anlaşılacağı üzere sizin yazmış olduğunuz css kodun tüm tarayıcılarda çalışan versiyonunu oluşturur.

css-sprit.es

csssprite

Geldik benim en çok kullandığım araca. Bu araç ile  css sprite tekniği ile kullandığımız resimleri upload edip birleştirebiliriz.

Photosop kullanıp resimleri tek tek birleştirmektense bu araç ile bir kaç saniyede da bu işi halledebiliriz. Ayrıca birleştirmekle kalmayıp bize css ve html kodunu da üretiyor.

Bunun dışında daha önce birleştirdiğiniz resimde bulunan resimlerin koordinatlarını bulabilmenizi sağlıyor.

Photoshop veya benzeri bir resim programı kullanamayanlar içinde çok kullanışlı bir araç olacaktır.

website-performance.org

spritegen

Yine css sprite tekniği ile kullandığınız resimleri birleştirmenizi sağlayan bir site. css-sprit.es den farklı olarak resimleri rar veya zip dosyası içerisinde upload etmemiz gerekiyor.

csstypeset.com

csstypeset

Siteniz için uygun yazı fontları ve renklerini deneyip css kodunu bu siteden edinebilirsiniz.

gradients.glrzad.com

glrzad

Css ile gradient arka planlar oluşturup css kodunu sizin için oluşturur.

layerstyles.org

layerstyles

Arayüzü photosop programını andıran sitede, arka planlar oluşturabilirsiniz.

westciv.com

westciv

Css3 ile gelen bir çok özelliğin destekleyen tüm tarayıcılarla uyumlu css kodunu üretir.

cssprism.com

cssprism

Url'sini vermiş olduğunuz css dosyası içerisindeki css kodunda kullanılan bütün renkleri bulur. Bu renkleri değiştirebilir ve değişim sonucunda oluşan yeni css dosyasını indirebilirsiniz.