8 Useful Online Tools for Web Designers and Developers
Finding stuff to make your life easier is one of our passions. Whether it be freebies like fonts and icons, or tools to help you do your job, we search and find them so you can focus on the important things. For this post, we’ve found some online tools that are useful for design and development tasks, and the best part is…they’re all free to use.
0 to 255
0 to 255 is a simple tool that helps web designers find variations of any color.
Spritebox
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.
jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
Frame Box
Frame Box is an easy to use online tool for creating and sharing wireframes.
CSS3 Generator
CSS3 Generator is a simple tool that creates some cross-browser CSS3 code based on whatever values you want.
ProCSSor
ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.
Super Conversion Button
This little tool let’s you easily create a beautiful, effective call-to-action button in seconds.
wordmark.it
Wordmark.it is a tool that lets you quickly preview how a wordmark looks with the fonts installed on your computer before setting out to find new ones.
Related Posts
Here's some other articles that you will definitely find useful.
8 jQuery Plugins for Spicing Up Your Forms
Open Source Tools and Scripts for WordPress Developers
8 Web Development Resources and Tools you Should Try
8 jQuery Plugins for Layout and UI Enhancements
12 Helpful Tools for Responsive Web Design
21 comments
DTX Studios
February 4, 2011Nice collection of tools. Its really helpful.
Andrey Korobitsin
February 4, 2011Frame Box – wow!
Seems like it will be a good alternative to the Axure I currently use.
Thank you for useful resources.
chokilala
February 4, 2011ProCSSor’s hyperlink leads to 0to255. Btw, nice collections
Henry Jones
February 4, 2011Fixed. Thanks.
Kaushik Panchal
February 4, 2011Thank you so much for the post, I was stuck deciding typeface for an Identity project and Wordmark.it just helped me.
Thanks again
Angelee
February 4, 2011thanks for the Css3 Generator, definitely needs it this time..
Angelee
February 4, 2011But, I’m looking for the transparency.. Ain’t seeing it in the generator, but I’ll keep on looking for other sources. Thanks for sharing these, the first one is also interesting.
Lee Marriott
February 4, 2011I’m just about to start learning javascript and the JSFiddle tool looks ideal for this. Thanks for this great post.
Sruthish
February 4, 2011Really useful and awesome…
Martin V
February 4, 2011Really great collection, wordmark.it and spritebox are just awesome.. instant bookmarks!
Toby
February 4, 2011Thank you for sharing, great collection!
Theo
February 4, 2011Nice list, 0 to 255 is new to me, thanks!
Anything Graphic
February 4, 2011Thanks for these great tools! Can’t wait to try Spritebox and the CSS3 Generator to learn some new stuff!
Chris McAllister
February 4, 2011Super Conversion Button should save me a lot of time, thanks!
Ash Menon
February 6, 2011I’m surprised a button generator made it into this list.
Vipul Mathur
February 6, 2011Very useful tools… Thanks for shearing.
Seenu
February 8, 2011Nice collection of tools.
Tommy V.
April 13, 2011Wordmark.it is perfect! I was just flipping through my 2,800 fonts for a client design. This made my day sooooo much easier!
Onur
June 2, 2011You need to try http://webarti.com/best-CSS3-button-maker/ too. This is a new CSS3 tool that allows you to create stylish buttons, boxes etc. I think, it deserves to be listed in this collection.
enursa
June 4, 2011nice tools. Thanks for share
silvi anggraini
July 23, 2011great tools, thanks for share
but i love http://www.colourlovers.com/ to find color variation for web page, such as palette or pattern