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
- CSS Font and Text Style Wizard
Use this wizard to experiment with font and text styles and generate sample CSS style source code. - Em Calculator
Tool for calculating pixel font sizes to ems.
- korhoen typeviewer
css typeviewer - text sizing - up the garden path
264 Screenshots - Typetester
Compare fonts for the screen
Forms
- Accessible Form Builder
Generate XHTML-compliant accessible forms quicky and easily - CSS Form Code Maker
Generates ‘Colorful Box Layout’ For Forms - JotForm
Web Based WYSIWYG Form Builder
Layout
- CSS Creator
Live CSS Cascading Style Sheet Layout generator for your web site - CSS HTML PHP Website Template Maker
This PHP - HTML - CSS template generator creates a two column layout with both a header and a footer…. - CSS Rounded Box Generator
generates html and css for rounded corner boxes
- Firdamatic
Firdamatic is an online tableless layout generator that allows you to create and customise layouts easily… - Free CSS Template Code Generator
Maker for 3 Column Layout (tableless) - Page Maker - The Generator Form v2.90
CSS Source Ordered Variable Border 1-3 Columned Page Maker - QrONE CSS Designer
Online CSS Generator - Scriptomizers
A CSS stylesheet generator
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
- CSS Compressor
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. - CSS Formatierer und Optimierer
CSS optimize - CSSTidy
CSSTidy is an opensource CSS parser and optimiser….. - Clean CSS - Optmize and Format your CSS
CSS Formatter and Optimiser, CSS Formatierer und Optimierer - Format CSS Online
Automatically format your CSS (cascading style sheets) so they are easy to read and edit. - Icey CSS Compressor
Removes everything useless from stylesheets. - Online CSS Optimizer
CSS Optimizer optimizes and reduces the file size of the Cascading Style Sheets - Online CSS Optimiser/Optimizer
This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go - Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS
This is a source code beautifier (source code formatter), similiar to indent - Tabifier
HTML and CSS code beautifier - Webucator
A CSS reference that allows you to test your CSS code.
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
BlockStop (October 20th, 2006, 8:06 pm)
Very nice! These tools are very handy!
Ivan Minic (October 20th, 2006, 8:12 pm)
Wow…. brilliant list!
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].
Keyne (October 21st, 2006, 5:29 am)
Nice collection, thx!!!
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. :)
Dave (October 21st, 2006, 3:40 pm)
oh, sweet. now, if i could just get them to help me fix my site
dean (October 22nd, 2006, 5:22 pm)
Very very helpful for me, thank you very much
Suraj (October 24th, 2006, 11:07 pm)
WoW is all I can say. Thanks for these resources!
borat (January 5th, 2007, 5:25 pm)
plzz add my link, its a nice php webbased css-editor.
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.
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
Mark Priestap (April 23rd, 2007, 10:33 am)
Thanks for the list!
What about wufoo.com?
Ece (June 16th, 2007, 3:21 am)
Just a kid in a candy store aren’t you Barry
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.
Nishanthe (August 9th, 2007, 5:57 pm)
Thank you for the useful list.
-Nish
Fahid (August 23rd, 2007, 1:46 pm)
Thanks for this handy tools……
very helpful…….
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.
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.
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.
Todd Loss (December 28th, 2007, 11:13 am)
this is a great list, thankyou very much for the article
Jeff Adams (January 2nd, 2008, 1:09 pm)
awesome article, tools are massivley handy thanks very much Smashing Magazine!!!
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…
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]
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)?
kunter (April 15th, 2008, 10:28 pm)
and so is why this site is second to none. best regards
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
sezer (August 10th, 2008, 3:49 am)
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — Link [css-lessons.ucoz.com]
Arkadas (August 19th, 2008, 2:35 am)
Link [www.livearkadas.com]
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.
mirc (August 31st, 2008, 7:19 am)
Link [www.turkiyemirc.net]
chun (September 14th, 2008, 8:59 pm)
thanks! I posted your list on Link [www.jizhiunion.com]
Миша (September 26th, 2008, 9:27 pm)
Давно искала эту информацию, спасибо.
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
ulukent (October 2nd, 2008, 10:43 am)
Link [www.ulukent.net]