background preloader

CSS Generators

Facebook Twitter

15 Great HTML5 & CSS3 Generators. HTML5 and CSS3 are great languages to start off learning with, and I’ve always thought that one of the best ways to start learning is to just dive in and manipulate the code. As you could probably tell, this is where generators step in. They are a great way to generate some code, play with it, and learn.

Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. Well, generators can take off that edge and do those small things for you each time. As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. Now, text-expander is great but it doesn’t solve every need, and in this case there is a big need for generators so I took the time to find 20 of my favorite and describe why I like them.

I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. CSS3 Generators CSS3.me. ! CSS Tutorials & Code Generators. CSS3 Generator - CSS3 Tools & Snippets - CSS3Gen. CSS3 Generator. CSS3.0 Maker. MakeTemplate.com: CSS Tools. SelectORacle: CSS Selector Tool. English & Spanish translations of CSS2 and CSS3 selectors Ever wondered what a particularly complex CSS selector really means?

Here's your chance to find out! Simply enter one or more semi-colon separated selectors or rulesets into the following "Direct Input" area, or provide the URL of a stylesheet in the "URL Input" area. Best of all, the SelectORacle will flag potential errors and other problems, and it won't choke on any actual rules. You've always wanted to know what makes those line-noise posers tick-- now you can. Current notes and limitations Explainer Parser Potential expansion more internationalization of the translation text (help us out!) Comments, suggestions, critiques, or other feedback?

Coding and expertise: Kevin Jacobs Idea and styling: Eric Meyer Massive bug squashing: Ian Hickson Special thanks to: John Aycock Inspired by a comment made by: Murray Summers Spanish Translation: Favio Manriquez Leon (though all mistakes are mine alone) Sky CSS Tool: Create CSS Classes. CSS Style-o-Matic.