Smashing Magazine we smash you with the information that will make your life easier. really.
List of CSS Tools
September 2nd, 2006 in CSS | 113 Comments
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.
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) - Layout-o-Matic
Generates tableless CSS layouts at the touch of a button - 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 - Selectoracle
English and Spanish translations of CSS3 selectors - 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….. - CSS Tweak ~ Web Based CSS Tweaker!
CSS Tweak will take your CSS and optimize it so that file sizes and download times are reduced…..Mac - 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.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
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
clvezlys (October 21st, 2006, 6:12 pm)
A very nice list.
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?
msn adresleri (May 24th, 2007, 8:23 pm)
Thanks You
Beatifiul The Site
Best Regards
komik videolar (May 24th, 2007, 8:24 pm)
Very very helpful for me, thank you very much
Emre (May 31st, 2007, 10:31 pm)
Very very helpful for me, thank you very much
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!!!
Bodrum (January 8th, 2008, 7:57 am)
Thanks You
Beatifiul The Site
Best Regards
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
MyFrom (May 1st, 2008, 9:14 am)
Thanks ..