Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

List of CSS Tools

September 2nd, 2006 in CSS | 133 Comments

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 generator
    CollyLogic CSS Multi-element Rollover Generator
  • CSS Tab Designer
    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!
  • Listamatic
    not a tool but very useful! - one list, many options - Using CSS and a simple list to create radically different list
  • Listamatic2
    nested list options
  • List-O-Matic
    Generate CSS-styled navigation menus based on list items
  • List-O-Rama!
    Dreamweaver MX and UltraDev Zone - List-O-Rama will allow you to generate nice CSS inline menus in seconds
  • CSS Menu Generator
    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 Child
    The Man in Blue Experiment - I want the body of Site [...] with the face of site [...]
  • CSSVista
    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 Wizard
    Use this wizard to experiment with table border styles and generate style source code.
  • I Like Your Colors!
    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 Changer
    Change the scrollbar colors in an HTML page
  • S5Easy: Create S5 Slideshows Easy Online
    Create your slideshow in only 3 steps
  • Spanky Corners
    ‘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

Delicious button Stumbleupon

Advertisement
  1. 1.

    Sam W (October 9th, 2006, 5:55 pm)

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

  2. 2.

    BlockStop (October 20th, 2006, 8:06 pm)

    Very nice! These tools are very handy!

  3. 3.

    Ivan Minic (October 20th, 2006, 8:12 pm)

    Wow…. brilliant list!

  4. 4.

    Keith (October 20th, 2006, 8:35 pm)

    Excellent compilation of CSS tools. I’ve never an expert in CSS, but these will definitely help Link [www.neohide.com].

  5. 5.

    Keyne (October 21st, 2006, 5:29 am)

    Nice collection, thx!!!

  6. 6.

    Constantin (October 21st, 2006, 11:14 am)

    A good link to add, very helpful:

    free standards-friendly layouts: Link [andreasviklund.com]

    go check, it should be on your list. :)

  7. 7.

    Dave (October 21st, 2006, 3:40 pm)

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

  8. 8.

    dean (October 22nd, 2006, 5:22 pm)

    Very very helpful for me, thank you very much

  9. 9.

    Suraj (October 24th, 2006, 11:07 pm)

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

  10. 10.

    borat (January 5th, 2007, 5:25 pm)

    plzz add my link, its a nice php webbased css-editor.

  11. 11.

    Chin Yong (January 24th, 2007, 12:03 am)

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

  12. 12.

    Alison the Franchise Queen (February 9th, 2007, 8:41 pm)

    Help!! These tools are great, but I need to know how to adapt the CSS on my site so that it is printer friendly. I particularly need to how how I handle pages with different content heights and get them to break at the right place. The main issue is to adapt the CSS so as not cut of words in the left hand margin. Can anyone point me in the right direction? Alison

  13. 13.

    Mark Priestap (April 23rd, 2007, 10:33 am)

    Thanks for the list!

    What about wufoo.com?

  14. 14.

    Ece (June 16th, 2007, 3:21 am)

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

  15. 15.

    lumonata - bali web designer (July 31st, 2007, 5:40 pm)

    thank you for all of your article in this site. its very helpfull for me as a newbee.

  16. 16.

    Nishanthe (August 9th, 2007, 5:57 pm)

    Thank you for the useful list.
    -Nish

  17. 17.

    Fahid (August 23rd, 2007, 1:46 pm)

    Thanks for this handy tools……

    very helpful…….

  18. 18.

    Matt M (October 2nd, 2007, 11:03 am)

    I like to post my CSS tool as well, if anyone is interested:

    Link [hackd.wordpress.com]

    You can copy and paste CSS code, and it will visually display to you the results of the colors.

  19. 19.

    Alison (October 18th, 2007, 5:53 pm)

    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.

  20. 20.

    Andres (December 7th, 2007, 2:49 am)

    Maybe you should include this in your list: Link [www.cssbuttons.net]

    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, CMS, Blogs, and similar web sites faced with dynamic content challenges.

  21. 21.

    Todd Loss (December 28th, 2007, 11:13 am)

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

  22. 22.

    Jeff Adams (January 2nd, 2008, 1:09 pm)

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

  23. 23.

    uzamax (January 17th, 2008, 4:54 pm)

    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…

  24. 24.

    chris Larson (March 10th, 2008, 11:41 am)

    Sweet list thanks. I’ve used a few of these sites. I posted your list on Link [listdid.com]

  25. 25.

    adria (March 31st, 2008, 8:12 am)

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

  26. 26.

    kunter (April 15th, 2008, 10:28 pm)

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

  27. 27.

    Gazebo - Music Videos India (April 19th, 2008, 8:54 pm)

    Thanks GR8 list, I want to ask a question about color options in a website I want to put 3 color options for my website i.e. 1 will be default color, and 2 colors of choices I want to put 3 buttons ( with 3 different colors - Red, Green, Grey ) in my website , when on clicked 1st button it will show the website in Red color and when I click 2nd button It will change the color of the whole website from Red to Green and same process for third button.
    Thanks

  28. 28.

    sezer (August 10th, 2008, 3:49 am)

    CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — Link [css-lessons.ucoz.com]

  29. 29.

    Arkadas (August 19th, 2008, 2:35 am)

    Link [www.livearkadas.com]

  30. 30.

    Jens Meiert (August 19th, 2008, 3:35 am)

    Oh, I hope I may point out that Link [uitest.com] features yet additional tools, not just related to CSS.

  31. 31.

    mirc (August 31st, 2008, 7:19 am)

    Link [www.turkiyemirc.net]

  32. 32.

    chun (September 14th, 2008, 8:59 pm)

    thanks! I posted your list on Link [www.jizhiunion.com]

  33. 33.

    Миша (September 26th, 2008, 9:27 pm)

    Давно искала эту информацию, спасибо.

  34. 34.

    rap dinle (September 29th, 2008, 2:00 pm)

    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

  35. 35.

    ulukent (October 2nd, 2008, 10:43 am)

    Link [www.ulukent.net]

Leave a Reply

Allowed Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">
Advertisement
 

All Posts

Advertisement

Fresh Bookmarks

Making of Dolphins - Photoshop Tutorial
Tips about how the Dolphins wallpaper was made.

Forms Error Messages - Showcase
42 Examples - Design Showcase

50 Excellent Footer Designs
A showcase of beautiful footer designs.

Designers Review of Books
A single place online where you could get constant updates and reviews of design books.

Christmas Icon Sets
A collection of Christmas icon sets, available for free download.

CSS Type Set

Comics Photoshop Action

  • 9Rules Logo
  • Quicksprout Logo