10 Productivity Enhancing CSS and CSS3 Tools and Generators
CSS tools can save a lot of a time and frustration when working on a layout, as they can automatically generate some of the tedious code for you, and help you improve your productivity. With the advent of CSS3, there are also now some CSS3 tools and also some CSS3 generators that can create gradients for you, as well as provide WYSIWYG visuals. Most of us are visual learners, and even though hand coding is preferred for work, it helps to be able to see and learn what various CSS properties do.
In this post, you’ll find 10 productivity enhancing CSS tools and generators, as well as some CSS3 tools as well.
If you’re new to this field, you might like to see these web development resources:
20 Shockingly Cool HTML5 Canvas ApplicationsFresh and Useful HTML TutorialsThe Ultimate HTML5 ToolboxWay Cool CSS3 Typography Experiments30 Awesome jQuery Navigation Menu Tutorials + Plugins10 Awesome CSS3 Techniques You’ll Want to Start UsingThe Ultimate CSS3 ToolboxEnjoy!
CSS3 PleaseCSS3, Please! The Cross-Browser CSS3 Rule Generator. You can edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet.
SpriteboxSpritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.
Tiny Fluid GridAn easy way to build fluid grid based websites.
Ultimate CSS3 Gradient GeneratorA powerful Photoshop-like CSS gradient editor.
CSSDeskA live updating and editing sandbox tool for CSS.
SlickMap CSSSlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation.
ProCSSorProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.
CSS Validation by W3CCheck Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.
CSSCreatorThe generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. The generator requires a modern DOM capable browser with JavaScript enabled.
Online CSS Reset ToolThese default browser styles are sometimes useful, but can interfere with layout, typography, and other aspects of your site’s design. Using a CSS Reset, you can neutralize the many disparate browser defaults and establish a clean foundation for applying CSS consistently across browsers. To help you find the perfect CSS-reset styles, CSSresetr lets you try all the best CSS Resets on a variety of web pages – even your own.
Share this on del.icio.us Bump this on DesignBump Submit this to DesignFloat Digg this! Add this to DZone Share this on Facebook Submit this to FAQpal Post on Google Buzz Share this on Mixx Share this on Reddit Stumble upon something good? Share it on StumbleUpon Share this on Technorati Tweet This! Blend this! Box this on ZaboxGet Shareaholic
Victor Miranda
Professional Ethical Hacker, Pentester & Forensics Investigator MPCS, CEH v8, CSSP, CICP-CICAP HTCIA Member & ISECOM Member Twitter: @victormirandamx