CSS3 Çevrimiçi Araçları

CSS3 Arayüz Geliştiriciler için bir çok güzel özellik getirdi. Bu yeni özellikler gayet kullanışlı ve kuvvetli özellikler. Bu özelliklerin bazılarını kodlarken özellikle metin editörü ile kodlama yaparken zorlanabiliyoruz. Bu durumun çözümü için bazı araçlar yardımımıza yetişir. Ben aşağıda sıraladığım bir çok aracı kullandım. Bazılarını ise bu yazıyı yazarken araştırırken buldum ve buraya ekledim. Umarım kullanışlı olur. Sizinde bu listenin dışında ekleyeceğiniz araçlar var ise önermeniz güzel olur.

Renk Geçişi

CSS3 ile gelen güzel özelliklerden bir tanesi renk geçişinin CSS yardımı ile uygulanabilmesi. Kodlaması biraz sıkıntılı olan bu konuda bir araç kullanmak gerekiyor.

• http://www.colorzilla.com/gradient-editor/
  Renk geçişi örneklerini sunması çok güzel.
  Farklı tarayıcılar için kod üretmesi güzel.
  Tek sıkıntı doğrusal renk geçişi var ama radyal renk geçişi yok
• http://westciv.com/tools/gradients/
  Doğrusal ve Radyal renk geçişleri oluşturmamıza yardımcı oluyor
• http://gradients.glrzad.com/

Oval Kenar

Oval kenarlar oluşturmak için her ne kadar bir araca ihtiyaç olmasa da dört köşesi aynı değer olmayan oval kenarları test etmek açısından kullanılabilir.

• http://border-radius.com/
• http://cssround.com/

Buton

Buton olarak ayrı bir araç açmaya her ne kadar gerek yoksa da bu isimle bir çok site olduğu için böyle bir kategori ekledim. Aslında tüm border-radius, box-shadow, text-shadow gibi özelliklerin tanımlandığı araçlar bunlar.

• http://css3button.net/
• http://www.cssbuttongenerator.com/
• http://css-tricks.com/examples/ButtonMaker/
• http://www.cssportal.com/css3-button-generator/
• http://css3buttongenerator.com/

Kutu Gölgeleme

Daha önce bu konuda bir yazı yazdım ama bu tip bir araçta örnek kod saklamanın yerine alabilir. Gayet kullanışlı bir araç

• http://www.wordpressthemeshock.com/css-drop-shadow/

Sayfa Planı

Grid yapılarını gelişmesi ile bir çok hazır kodlar üretilmeye başlandı.

• http://csslayoutgenerator.com/
• http://grids.heroku.com/
• http://ianli.com/blueprinter/
• http://1kbgrid.com/
• http://gridinator.com/
• http://grid.mindplay.dk/

Metin

CSS3 ile birlikte metinlerin görselliği ile alakalı bir çok yeni özellik eklendi bunları test etmek için güzel araçlar

• http://www.3dcsstext.com/ (3 boyutlu)
• http://www.typetester.org/
• http://www.csstypeset.com/
• http://csswarp.eleqtriq.com/

CSS Sprite

CSS sprite tekniği ile ilgili bir çok araç olsa da bence mantıklı olan kendi sprite’ını kendin yapmak.

• http://css-sprit.es/
• http://spritegen.website-performance.org/
• http://csssprites.com/
• http://www.floweringmind.com/sprite-creator/index.php
• http://spriteme.org/

Border-image

• http://border-image.com/
  border-image ile ilgili tek araç. Kullanışlı bir araç.

Animasyon

CSS3 ile sayfalarımıza flash benzeri animasyonlar eklmemize yarayan güzel bir araç.

• http://matthewlein.com/ceaser/
• http://jeremyckahn.github.com/stylie/

Font-face

Daha çok yazı tiplerini birbirine çevirmek için kullanılan bu araçlar, bunun yanında @font-face kodunu üretmek içinde kullanışlı.

• http://www.fontsquirrel.com/fontface/generator
• http://www.kirsle.net/wizards/ttf2eot.cgi ttf yazı tiplerini eot’ya çevirmek için çevirim içi araç.
• http://onlinefontconverter.com/ Farklı yazı tiplerini birbirine çeviren çevirim içi araç
• http://ttf2eot.sebastiankippe.com/ ttf’den eot ye çeviren başka bir çevirim içi araç
• http://xmlgraphics.apache.org/batik/tools/font-converter.html ttf’den svg’ye çevirme aracı

Çoklu kolon

• http://debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3
• http://www.aaronlumsden.com/multicol/

CSS ile ok

• http://cssarrowplease.com/

Transform

• http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm

Filtre

• http://html5-demos.appspot.com/static/css/filters/index.html

Toplu

• http://css3generator.com/
  border-radius
  box-shadow
  text-shadow
  rgba
  font-face
  multiple-column
  box-resize
  box-sizing
  outline
  transtion
  2d transform
  Seçiciler
  gradient
• http://www.css3.me/
  border-radius
  box-shadow
  gradient
  opacity
• http://css3gen.com/
  gradient
  border-radius
  box-shadow
  text-shadow
• http://www.css3maker.com/index.html
  border-radius
  gradient
  2d transform
  animation
  transtion
  rgba
  text-shadow
  box-shadow
  text-rotation
  font-face
• http://www.webtutorialplus.com/css3-generator.aspx
  border-radius
  gradient
  2d transform
  transtion
  text-shadow
  box-shadow
  outline
  multiple-column
  box-resize
• http://css3.pascal-seven.de/
• http://westciv.com/tools/gradients/
  2d ve 3d Transform
• http://www.layerstyles.org/builder.html

Kaynaklar

• http://www.sitepoint.com/10-best-css3-code-generators/#fbid=ovoh-eTTYCI
• http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/
• http://line25.com/articles/handy-roundup-of-css3-generators-and-tools
• http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html (sprite araçları)
• http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

css3 � evrimiçi araçları