Six Useful CSS3 Tools

By / Aug 5, 2010 / Tools
shares

CSS3 continues to gain popularity as we’re seeing it used in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers. Nevertheless, if you’re one of those that haven’t started using CSS3 or you’re a CSS3 pro just looking to speed up your work flow, here are six CSS3 tools that you should find useful.

CSS3 Button Maker

css3 tools

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Generator

css3 tools

Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview.

CSS3 Please!

css3 tools

CSS3 Please! is a CSS3 rule generator that acts as a sort of playground. It allows you make various CSS3 tweaks and see a live preview. Then you can copy and paste into your own file.

CSS3 Gradient Generator

css3 tools

The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS3 Transforms

css3 tools

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Selectors Test

css3 tools

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

20 Comments

  1. Aidan
    August 5, 2010

    This one’s also useful, for IE 6-7 compatibility : http://css3pie.com/

    Reply
  2. wesley
    August 5, 2010

    Hi, thanks for this list!
    Just wanted to point out though that the first one doesnt link well.. Handy tools nonetheless!

    Reply
  3. Mr.MoOx
    August 5, 2010

    Great but… YOU FORGOT CSS3PIE !
    http://css3pie.com/
    :)
    So 7 tools ^^

    Reply
  4. iphone news reader
    August 5, 2010

    Thanks for this great list Henry, I’ll be using some of those tools in my next project, this could have make my life really easier on my past projects. Thanks for sharing

    Reply
  5. Nauman Akhtar
    August 5, 2010

    looks nice, so cool and fluffy :)

    Reply
  6. mstrb
    August 5, 2010

    Links for “CSS3 Button Maker” and “CSS3 Selectors Test” are messed up. nice post nontheless.

    Reply
  7. Jesus
    August 5, 2010

    Awesome thanks, the first link just needs an “h” at the beginning (currently begin as “ttp://..”) and works.

    Reply
  8. Henry
    August 5, 2010

    Thanks to those that pointed out the missing “h” on the first link. It’s fixed.

    Reply
  9. Christian Ross
    August 6, 2010

    One I use regularly for quick coding: http://border-radius.com/

    Reply
  10. Damian Smith
    August 6, 2010

    Nice tutorials, I’m loving CSS3 and HTML5, but I am a big fan of w3c compliance and do not want to place CSS hacks on my sites. So its a shame that only certain browsers will show any CSS3 that I use. But eventually when more browsers support it the websites will magically begin to look better!

    I still think these tutorials will benefit me though, I will just leave out the css fixes and make sure it still looks “ok” on the non supported browsers but great on supported browsers.

    In my opinion it does not always matter that a drop shadow does not appear on some browsers and does on others or curved edges etc, as long as it still looks ok and people wouldn’t even think, “ooooh there should be a shadow on that” then it’s all good. Better to have clean CSS in my opinion!

    :) thanks for sharing

    Reply
  11. Gotah
    August 6, 2010

    Thanks, great article.

    The link on the image “CSS3 Selectors Test” is fail : “hhttp://tools.css3.info/selectors-test/test.html”

    Reply
  12. Nathan Williams
    August 6, 2010

    Thanks for a comprehensive list of CSS tools. The CSS3 generator has been especially helpful in my work. Look forward to more. Great post Henry!

    Reply
  13. vuitton
    August 10, 2010

    Just keep in mind .. it will get better one day

    Reply
  14. Craig
    August 29, 2010

    Great list, have never tried these out before so may try a test of these soon, Great share

    Reply
  15. Lisa Thomason
    September 14, 2010

    Excellent list, really nice share, takes the head-ache out of calculations. LT

    Reply
  16. Amanda Smit
    September 20, 2010

    Thank you for this comprehensive list of CSS3 tools. CSS3 generator is a favourite!

    Reply
  17. Chand
    February 15, 2011

    Thank you for the fab list of CSS3 tools. Loving the idea of the CSS3 Button Maker and the CSS3 Gradient Generator. Makes life a lot more easier with some of these tools generating the code for you.

    :) Great stuff. Thank you once again.

    Reply
  18. Brian
    May 19, 2011

    Great Resource, nice one, thanks mate

    Reply
  19. Edd Turtle
    August 10, 2011

    Good job on the article :) Actually brilliant tools which I use regularly, I also use the Buttonize Framework from creating buttons with CSS3 @ http://css3framework.co.uk

    Reply
  20. Tom Foolry
    December 7, 2011

    Great article! These will really help me in putting my new website together. I haven’t really done much web design at all, but this will be a great help to me!

    Reply

Leave a Reply