4 Places to Find CSS3 Generators - dummies

4 Places to Find CSS3 Generators

By John Paul Mueller

CSS3 generators, which are tools you can use to create, interact with, or test code. These tools include a wide range of specific types, including wizards, designers, Integrated Development Environments (IDEs), and a host of other items.

How to enhance CSS3 selector support with Selectivizr

The CSS3 selector support in older browsers is nearly nonexistent. Of course, you have to have great selector support to make most special effects work properly. The answer to the problem is to use Selectivizr to overcome these issues. This tool is specifically designed to help with problems that crop up in Internet Explorer versions 6 through 8 — and it works with a number of libraries, including

  • jQuery

  • dojo

  • prototype

  • Yahoo!

  • DOMAssistant

  • MooTools

  • NWMatcher

Even with this tool, you don’t get complete selector support. Fortunately, the Selectivizr site provides a list of selectors and tells you which selector types it supports for a given library. With this knowledge, you can usually overcome any selector issues when working with older browsers.

How to design unusual CSS3 list presentations with Liffect

Developers use lists for a number of tasks when creating a page. For example, lists play an important part in creating many menus. Another purpose for lists is to display content. You can display all of the content at once, or make the content special by presenting one item at a time. The purpose of Liffect is to make it possible to create special effects for lists.

This tool generates custom code for animating your content list. All you do is define the kind of animation you want, the time the animation requires to complete, the delay between items, and whether you want items selected randomly. At the bottom of the page are selections for the kind of browsers you want to support.


After you make your selections, click Generate. The utility outputs the HTML, CSS3, and JavaScript code required to create the animated sequence. Of course, you still have to provide the content by modifying the HTML code (or providing some automated method for generating it). Otherwise all you need to do is copy and paste the resulting code to your application.

How to edit CSS3 Code with Komodo Edit

Yes, you can create any browser-based application you want by using a simple text editor. Any editor that outputs text without any formatting will work just fine. In fact, any method you have of producing pure text output will work.

However, most developers opt for an environment that’s friendlier and easier to use — often in the form of an IDE. Using an IDE provides you with helpful information, such as the properties available when you’re working with CSS or the inputs required for a JavaScript call.

Komodo Edit provides good support for CSS3, HTML5, JavaScript and a host of other languages, including Perl, PHP, Python, Ruby and Tcl. The editor works on Windows, Macintosh, and Linux systems.

The paid version of this product supports additional languages and a wealth of additional features, but the free version is perfectly usable for JavaScript coding. The biggest lack in the free version is a debugger, but you can easily use the debugger that comes with your browser to make up the difference.

How to test CSS3 font stacks with FFFFALLBACK

In some cases, you want to create a custom font stack so that your page appears precisely as you want it to appear to the end user. Another solution to this problem is to use FFFFALLBACK — a tool that makes it possible to try various font combinations on the target page.

The page contains instructions for using this tool. You simply drag the bookmarklet to the toolbar of your browser, where it becomes a clickable button. Go to the site you want to modify, and then click the FFFFALLBACK button.

The tool analyzes the CSS on the page and creates a clone of the page. You’ll also see a tool on the cloned page that you can use to test various fonts. To change the font, type the font name and press Enter in the field supplied.


The fallback font you choose appears in an alternative color, below and to the right of the original font. To see just the fallback font, click Fallback. Likewise, to see just the original font, click web Font.

This particular tool only works with webkit browsers such as Firefox, Chrome, and Safari. It doesn’t work with other browsers, including Internet Explorer and Opera.