10+ useful tools to simplify CSS3 development

by Jean. 14 Comments -

CSS3 is indeed a great improvement to the CSS specification. It allow web developers to add stylish effects to their websites, without any headaches. That said, several tools can definitely be life savers when building websites using CSS3. In this article, I have compiled the 10+ most useful tools for all your CSS3 coding.

CSS3 Pie


Are you surprised that Internet Explorer 6/8 CSS3 support is almost non existent? I guess most of you aren’t. Unfortunately, some clients may want you to create a website that look like in a modern browser in IE. This is when CSS3 Pie is useful: It allows you to use most of the CSS3 cool features on IE.
→ Visit CSS3 Pie

CSS3 Builder


With this tool, you can design complex CSS3 boxes using an interface looking exactly like the one used for applying Photoshop effects. Definitely a great tool to save lots of time.
→ Visit CSS3 Builder

CSS3 Drop shadow generator


This one is quite similar to CSS3 builder, just use the sliders to visually design your drop shadow. Once done, just copy the CSS code which have been automatically created. Paste it to your css file, and you’re ready to go!
→ Visit CSS3 Drop shadow generator

Cascader


This tool isn’t CSS3 specific, but it is so useful that it would have been a shame not to include it on that list. Cascader lets you input some HTML code and it will detect all inline CSS, remove it from the HTML and add it to a separate stylesheet. A true time saver for those looking for clean HTML.
→ Visit Cascader

Border Radius.com


border-radius is one of the most popular CSS3 properties. Those who remember how boring it was to create boxes with rounded corners using images certainly know why. This tool allow you to quickly create a box and get the appropriate CSS3 code.
→ Visit Border Radius.com

Button Maker


CSS3 allows you to create awesome buttons. This tool, created by Chris Coyier, makes CSS3 button design extremely easy: Just pick colors, adjust radius, and get the code, ready to be pasted into your CSS file.
→ Visit Button Maker

CSS3 Generator


Need help with CSS3 declarations? This very handy generator helps you create declarations for most popular CSS3 properties: @font-face, RGBA, text-shadow, border-radius, and more.
→ Visit CSS3 Generator

Modernizr


Modernizr is a small script that detect support for CSS3 and adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. For example, if the browser does not support the multiple backgrounds functionality, a no-multiplebgs class will be added to the <html> element. then it will be pretty easy for you to fall back.
→ Visit Modernizr

HTML5 & CSS3 Support


Need to know if Internet Explorer 8 supports the text-shadow property? Just have a look to this very useful chart, which reveals CSS3 support for all major browsers. Definitely a page to have in your bookmarks!
→ Visit HTML5 & CSS3 Support

CSS3 Gradient Generator


As you can guess, this tool is a gradient generator. Just pick your colors using the picker, preview it in the preview area, and grab your ready-to-be-pasted code. It’s easy as that!
→ Visit CSS3 Gradient Generator

CSS3 Please


CSS3 Please is another very helpful site which allow you to copy and paste most common CSS3 declarations. It also has a preview area so you can live test your declarations.
→ Visit CSS3 Please

CSS3 Cheat Sheet


When coding, cheat sheets are very helpful to quickly remember properties and their syntax. Smashing Magazine has created this CSS3 cheat sheet that you can download and print. A preview version in .gif format is also available here.
→ Visit CSS3 Cheat Sheet

  • http://www.wordpressthemeshock.com jp

    Jean, thanks for featuring our curved drop shadow generator :) It’s an honor to be featured here !
    and of course, thanks for the showcase, didn;t know about some of these !

    keep the good work !

  • http://ramonvictor.com Ramon Victor

    I think you forgot the http://www.css3.me/
    It’s very useful and the design is awesome.

    Anyway, thanks for share these good web tools.

  • http://www.wendycockcroftwebdesign.com Wendy Cockcroft

    Thanks for the great information. Bookmarked. I’ve been using Cascader for a while now. Excellent tool. Have you seen http://projects.korrelboom.com/gradient-generator? I use it all the time, but I’ll give the one you’ve featured here a go.

  • http://www.tomhermans.com Tom Hermans

    Useful list J-B, but you missed one of the best:

    Ultimate CSS Gradient Generator : http://www.colorzilla.com/gradient-editor/

    • http://www.wprecipes.com Jean-Baptiste Jung

      Definitely a great tool, thanks!

    • http://madebypeppernet.com Brian

      Agreed. Though I’ve played with all of the tools listed here (and many others), Ultimate is the only tool I’ve ever used more than once.

  • http://iequalszero.com/ Jon Howard

    Fantastic list! Will come in very handy!

  • Wil

    Definitely a great list, but I’m missing selectivizr here. It enables css3 in IE. I find it really useful, been using it in combination with Prototype. http://selectivizr.com/

  • Pablo Mendoza

    I also check this page for HTML5 & CSS3 support table: http://caniuse.com/

  • Scott Haselton

    www.css3designer.com handles a lot of these features as well.

  • http://www.olivergast.de Olli

    Cool tools. Like the Drop Shadow generator.

    Thanks for sharing

  • verbatim

    Another great resource that really helps me is:
    http://rafael.adm.br/css_browser_selector/
    from the site: “CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.”

    Browser specific styles, all on one stylesheet, NO HACKS. best of all: all CSS validates.

  • http://www.sarkidinlee.com Şarkı dinle

    Agreed. Though I’ve played with all of the tools listed here (and many others), Ultimate is the only tool I’ve ever used more than once.

  • http://webcreationtips.com/ Abe

    Very helpful info about handy web tools.
    Thanks for share these.