CSS3 Please

Of all the tools, utilities and generators, I use CSS3 Please the most. The concept is simple — it shows an element with editable CSS3 properties. It’s a quick reminder of the syntax and allows you to play with different settings. Highly recommended.

CSSDesk

CSSDesk is a tool developed by Josh Pyles of pixelmatrixdesign.com. It’s similar to CSS3 Please; there are fewer starting styles but the interface is cleaner and you can edit the HTML.

CSSPrefixer

I accept vendor prefixes are necessary but they’re still a pain. CSSPrefixer can make your life easier — paste some non-prefixed code in the box and it’ll return all the required vendor-prefixed alternatives.

Alternatively, you can install a Python application to add prefixes and minify your CSS files.

normalize.css

At first glance, normalize.css appears to be another CSS reset. But rather than reseting styles, it normalizes them so they’re consistent across all browsers. Useful defaults are retained — such as margins on headings or input borders.

normalize.css is a great CSS starting point and all the code is commented so you can remove unnecessary features.

CSS-Crush

Like many other CSS minifiers, CSS-Crush is a PHP application which reduces file sizes to speed up page loading. However, it has several other tricks up its sleeve:

• Variables — define often used fonts, colors or other properties
• Automatic @import parsing — all CSS files are merged into one
• Aliases — CSS3 vendor-prefixed properties can be automatically generated
• Macros — transform snippets into longer code
• Functions — use mathematical formulas in expressions, e.g. width: percent(480, 960); transforms into width: 50%;
• Images can be imported and converted to data URIs.

Ceaser CSS Easing Animation Tool

CSS3 transitions are amazing but few of us delve beyond the ease or linear options. Ceaser is an easy-to-use tool which offers a range of animation opportunities. Choose a standard or preset easing type, tweak the curve and copy the code.

When can I use…

caniuse.com is one of the most useful HTML5 and CSS3 resources on the web. Search for any property or API name to discover which desktop and mobile browsers support the feature. The tool also provides links to associated website tools and tutorials. Bookmark it now!

Have I missed your favorite CSS3 tool?

Source Link: http://www.sitepoint.com/7-best-css3-utilities/