CSS3 Kaynakları Emrinizde

CSS3 Kaynakları Emrinizde

Web sitesi tasarımı yapanlar için CSS3 bir çok güzel                     özellik ile kullanılmaya başlandı. Gelen bu yeni özelliklerin bazılarını kodlarken  elbette sıkıntılar yaşanabilir. Internet               ortamında bulabileceğiniz bazı  araçlar bu noktada yardımınıza     koşacaktır. Başlıklara ayrılarak gruplandırılmış kaynak olabilecek               bazı siteler şu şekilde sıralanıyor. 

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/
• 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ç
• http://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

• 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

Kaynak: fatihhayrioglu.com