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.

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.

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.

Border-image

Animasyon

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

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

Ç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

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.