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

By Smashing Editorial, September 2nd, 2006 in CSS | 141 Comments | Forum

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 Spread the word on Twitter!

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.

    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.

  30. 30.

    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

  31. 31.

    Neel (November 26th, 2008, 9:37 am)

    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

  32. 32.

    Dane (December 21st, 2008, 12:14 pm)

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

  33. 33.

    ForumKD (December 29th, 2008, 2:32 pm)

    very very thanx…

  34. 34.

    Jamiel Sharief (January 31st, 2009, 4:40 am)

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

  35. 35.

    car jacks (March 14th, 2009, 4:32 am)

    It’s the first time I comment here and I must say you share genuine, and quality information for bloggers! Good job.
    p.s. You have an awesome template . Where have you got it from?

  36. 36.

    investor (March 18th, 2009, 1:17 am)

    This is a very comprehensive list, thank you!

  37. 37.

    arravorne (March 30th, 2009, 2:33 pm)

    Ммм, где ещё можно такие творения прочесть?

  38. 38.

    Michal Zigo (April 6th, 2009, 2:20 am)

    Very nice. Thanks!

  39. 39.

    Frato (April 22nd, 2009, 8:34 am)

    YASC (Yet Another Sprite Creator), an easy tool to generate your css rules for your sprite images : Link [www.lecentre.net]

  40. 40.

    cnsk (May 29th, 2009, 12:55 am)

    Good oneLink [www.winnou.com]

  41. 41.

    Servis (June 9th, 2009, 3:32 am)

    Some great advice there, excellent post

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>
Advertisement
 

Smashing Jobs

Browse all jobs » Post your jobs now!

Smashing Links

Stay in touch

Popular Posts

All Posts

Follow us on Twitter!
Subscribe to our RSS-feed!

Advertisement

Fresh Bookmarks

22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.

10 New PHP Content Management Systems
All based on PHP.

25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.

Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.

20+ CSS Data Visualization Techniques
Get inspired.

CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.

Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,

Webdesign: Five Minute Upgrade
Making Your Design Pop.

45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.

The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.

Blogroll

  • 9Rules Logo
  • Quicksprout Logo