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
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.

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ı.

Metin

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

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/
jeremyckahn.github.com/stylie/
http://easings.net/

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.cgittf yazı tiplerini eot’ya çevirmek için çevirim içi araç.
http://onlinefontconverter.com/Farklı yazı tiplerini birbirine çeviren çevirim içi araç
ttf2eot.sebastiankippe.com/ ttf’den eot ye çeviren başka bir çevirim içi araç
http://xmlgraphics.apache.org/batik/tools/font-converter.htmlttf’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

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][]

debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3 [http://www.aaronlumsden.com/multicol/]: http://www.aaronlumsden.com/multicol/ [http://cssarrowplease.com/]: http://cssarrowplease.com/ [http://css3generator.com/]: http://css3generator.com/ [http://www.css3.me/]: http://www.css3.me/ [http://css3gen.com/]: http://css3gen.com/ [http://www.css3maker.com/index.html]: http://www.css3maker.com/index.html [http://css3.pascal-seven.de/]: http://css3.pascal-seven.de/ [http://www.layerstyles.org/builder.html]: http://www.layerstyles.org/builder.html [http://www.sitepoint.com/10-best-css3-code-generators/#fbid=ovoh-eTTYCI]: 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://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/ line25.com/articles/handy-roundup-of-css3-generators-and-tools [http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html]: http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html [http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development]: http://www.catswhocode.com/blog/awesome-css3-generators-to-simplify-front-end-development