List of CSS Tools

Advertisement

What can be better than simple, useful and handy tools you can use “on the fly” in the development process? Whether you’d like to test font size, generate online-forms, create rollover-navigation, create a slide-show, format CSS code or optimize your code – you can use dozens of tools to make your life easier.

We’ve collected them. At least most of them, and compiled them in a brief and precise overview. And here what we’ve come out with – most useful CSS-Tools you can use developing tableless web-sites.
Links checked: May/14 2008.

Fonts

Forms

Layout

Navigation

  • Colly’s CSS rollover generator17
    CollyLogic CSS Multi-element Rollover Generator
  • CSS Tab Designer18
    CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
  • Listamatic19
    not a tool but very useful! – one list, many options – Using CSS and a simple list to create radically different list
  • Listamatic220
    nested list options
  • List-O-Matic21
    Generate CSS-styled navigation menus based on list items
  • List-O-Rama!22
    Dreamweaver MX and UltraDev Zone – List-O-Rama will allow you to generate nice CSS inline menus in seconds
  • CSS Menu Generator23
    CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

Misc Tools

  • CSS Love Child24
    The Man in Blue Experiment – I want the body of Site […] with the face of site […]
  • CSSVista25
    CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously……
  • HTML and CSS Table Border Style Wizard26
    Use this wizard to experiment with table border styles and generate style source code.
  • I Like Your Colors!27
    Use this tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.
  • Online CSS Scrollbar Color Changer28
    Change the scrollbar colors in an HTML page
  • S5Easy: Create S5 Slideshows Easy Online29
    Create your slideshow in only 3 steps
  • Spanky Corners30
    ‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

Formatters and Optimizers

Footnotes

  1. 1 http://www.somacon.com/p334.php
  2. 2 http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
  3. 3 http://typetester.maratz.com/
  4. 4 http://www.accessify.com/tools-and-wizards/accessibility-tools/form-builder/
  5. 5 http://www.maketemplate.com/form/
  6. 6 http://www.jotform.com/
  7. 7 http://www.jotform.com/
  8. 8 http://www.csscreator.com/version2/pagelayout.php
  9. 9 http://www.maketemplate.com/
  10. 10 http://www.neuroticweb.com/recursos/css-rounded-box/
  11. 11 http://www.neuroticweb.com/recursos/css-rounded-box/
  12. 12 http://www.wannabegirl.org/firdamatic/
  13. 13 http://www.ibdjohn.com/csstemplate/
  14. 14 http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
  15. 15 http://www.qrone.org/cssdesigner.html
  16. 16 http://www.scriptomizers.com/css/stylesheet_generator
  17. 17 http://www.collylogic.com/scripts/rollover.html
  18. 18 http://www.highdots.com/css-list/index.php
  19. 19 http://css.maxdesign.com.au/listamatic/
  20. 20 http://css.maxdesign.com.au/listamatic2/index.htm
  21. 21 http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
  22. 22 http://www.dmxzone.com/ShowDetail.asp?NewsId=5618
  23. 23 http://www.webmaster-toolkit.com/css-menu-generator.shtml
  24. 24 http://www.themaninblue.com/experiment/CSSLoveChild/
  25. 25 http://www.sitevista.com/cssvista/
  26. 26 http://www.somacon.com/p141.php
  27. 27 http://www.redalt.com/Tools/ilyc.php
  28. 28 http://www.iconico.com/CSSScrollbar/
  29. 29 http://www.s5easy.com/
  30. 30 http://tools.sitepoint.com/spanky/index.php
  31. 31 http://www.cssdrive.com/index.php/main/csscompressor/
  32. 32 http://cdburnerxp.se/cssparse/css_optimiser.php
  33. 33 http://csstidy.sourceforge.net/index.php
  34. 34 http://www.cleancss.com/
  35. 35 http://www.lonniebest.com/FormatCSS/
  36. 36 http://iceyboard.no-ip.org/projects/css_compressor
  37. 37 http://www.cssoptimiser.com/
  38. 38 http://flumpcakes.co.uk/css/optimiser/
  39. 39 http://www.prettyprinter.de/
  40. 40 http://www.arantius.com/tools/tabifier.php

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising
  1. 1

    This opitimiser collects all your inline styles and creates classes for them then compresses them.
    Peace,
    Sam

    0
  2. 2

    Very nice! These tools are very handy!

    0
  3. 3

    Wow…. brilliant list!

    0
  4. 4

    Nice collection, thx!!!

    0
  5. 5

    oh, sweet. now, if i could just get them to help me fix my site

    0
  6. 6

    Very very helpful for me, thank you very much

    0
  7. 7

    WoW is all I can say. Thanks for these resources!

    0
  8. 8

    This list is god-given. Really sweet and can really help a lot of developers out there.

    0
  9. 9

    Just a kid in a candy store aren’t you Barry

    0
  10. 10

    Thank you for the useful list.
    -Nish

    0
  11. 11

    Thanks for this handy tools……

    very helpful…….

    0
  12. 12

    Thanks for these useful links to the CSS tools! I’ve used several of them now and I have to say that the Layout-o-matic is without a doubt a fave.

    Thanks again.

    0
  13. 13

    this is a great list, thankyou very much for the article

    0
  14. 14

    awesome article, tools are massivley handy thanks very much Smashing Magazine!!!

    0
  15. 15

    CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual…

    0
  16. 16

    This list is amazing and so useful! Thanks so much! Does anyone know of a similar list of tools/tips for developers (especially PHP)?

    0
  17. 17

    and so is why this site is second to none. best regards

    1
  18. 18

    Oh, I hope I may point out that UITest.com features yet additional tools, not just related to CSS.

    0
  19. 19

    C marrant. Je suis tombé sur le site par hasard et j’ai me rendre compte de se qui m’attends en Inde. J’y vais dans 4 mois. Je suis vraiment impatient. Belles Photos, beaux “reportages”. Cool

    0
  20. 20

    Very useful stuff, I appreciate ur hard work. I am basically looking for navigation with submenus in it. Can you list an example of that sort. thanks

    0
  21. 21

    I am now a regular reader of this site…Thanks!

    0
  22. 22

    Thanks for putting together this list, its great. Keep up the good work.

    0
  23. 23

    Very nice. Thanks!

    1
  24. 24

    Very helpful.
    Thanks a lot!

    0
  25. 25

    Muhammad Shaheer Akhlaq

    October 6, 2009 3:41 am

    How to create variable for “backgroud-image:url()”

    0
  26. 26

    can i translate it into Chinese and published to my own website?I will retain your copyright

    0
  27. 27

    Hi, after a couple of redesigns (and some old pages are still in use) I have the problem to clean up my CSS. Is there a tool, where can parse a couple of urls and get an analysis, which css classes are not in use?

    0
  28. 28

    Very complete lists here

    Thanks a lot for sharing
    Very useful

    Regards

    0
  29. 29

    Time to face the music armed with this great inofrmtoain.

    0

↑ Back to top