HTML5 and CSS3 are not the future. They are here now and ready to be implemented in your next design project. This list of tools will help smooth and simplify the transition to HTML5 and CSS3.
HTML5 Boilerplate
They call it HTML5 Boilerplate, but it could easily be called HTML5 Bedrock as it is the comprehensive foundation for a modern website. This is a bundle of front-end development best practices rolled into one tidy and, more importantly, well documented package.
Initializr
HTML5 Boilerplate is deep and technical but may be overkill for more basic websites. Enter Initializr, an HTML5 template generator that is customizable to fit the scope of any project. To top off this amazing resource, the developer, Jonathan Verrecchia, includes the option to download a responsive template. Yes, please.
Can I Use?
Not all aspects of HTML5 and CSS3 are compatible with every browser. This site breaks down whether a feature is fully, partially or not supported in every major browser past, present and future. It may not be worth your time to create stunning HTML5 forms since, as of this writing, they are partially supported by only 49% of browsers.
When using partially supported CSS3 features it is best to implement them in a way that enhances the design. If rounded corners are paramount to the design border-radius is not your best option.
Pro Tip: Click the Import Stats tab to connect with your Google Analytics account and see your actual visitors’ compatibility with the new features of HTML5 and CSS3.
Dabblet
Think of Dabblet as a playground for CSS jockeys. Use it to test, and re-test, bits of CSS and HTML code. The clean, intuitive interface makes fine tuning code enjoyable. Upload the code to Github and share with collaborators or embed the code into a website.
CSS3, Please!
The grandaddy, catch-all CSS3 tool. Possibly a bit overwhelming at first, this tool touches on all of the main aspects of CSS3. Box shadow, opacity, transitions and more. Edit the CSS and preview the code. Brought to you by Paul Irish of HTML Boilerplate fame.
Ultimate CSS3 Gradient Generator
http://www.colorzilla.com/gradient-editor/
Adding background gradients is an incredibly powerful feature in CSS3. Writing this code is also incredibly time intensive.
Enter the Ultimate CSS Gradient Generator. This site mimics the familiar Photoshop Gradient dialogue box. Features include a preview, gradient presets, the ability to set color stops and options to adjust the hue, saturation and lightness of a given gradient. The cross browser CSS is commented and is easily copied to the clipboard.
Web designers across the globe are indebted to Alex Sirota for creating this amazing tool.
Border Radius
The beauty of this tool lies in its simplicity. Enter the desired radius for each corner and generate a preview. This site provides the CSS3, including vendor prefixes, ready to copy.
Devoth’s HEX 2 RGBA Color Calculator
Another basic, time-saving tool. Bevoth’s HEX 2 RGBA Color Calculator works as advertised. Enter a HEX value and set the opacity. Presto! RGBA for your CSS.
Font Squirrel
Font Squirrel has scoured the web for the best free commercial-use fonts. Available for download are @font-face bundles that ship with all files needed for cross-browser functionality. The best part? @font-face support goes way back. All major browsers are fully or partially supported–even IE6. Say goodbye to Copperplate Gothic Light forever.
CSS Font Stack
When you are looking for fonts that displays well across browsers and operating systems, look no further than CSSFonstack.com. The intuitive interface displays san serif, serif, monospaced, fantasy and script fonts. Hover over a font to view the Mac and PC installed system percentages. The site provides a font stack that degrades gracefully for older browsers.
HTML-Ipsum
Looking for dummy text for a mockup? Look no further than HTML-Ipsum. This site offers code snippets for everything, paragraphs of text, ordered nav lists, empty tables, example forms, and even the “Kitchen Sink.”
While this is just a sampling of available HTML5 and CSS3 tools, they are the best on the Web. Incorporating even a few of them into your development process will save time and result in more standards-compliant code.
Winner, winner, chicken dinner.