Using a CSS3 Generator

Charlie R. Claywell
3D CSS Text generator
3D CSS Text generator

Even though CSS3 has redefined the look and feel of the web with features that make creating visually compelling sites less complicated, learning all the properties and syntax can be a time consuming. If you want to jumpstart your ability to use the new features, use a CSS3 generator.

CSS3 Introduction

Before you jump into using a code generator, it does helps to have a general understanding of the new features. One of the easiest ways to get this is with online tutorials.

  • W3Schools: This is the ultimate source for of all web standard related content and CSS3 is no exception. The sites offers lessons on all CSS properties, but has segmented out a course for CSS3. In their 11-lesson course you learn about transition, animation, text effects, multiple columns and more. Each lesson includes examples and you can use their Try-It Editor tool to manipulate the coding to make sure you understand the concept.
  • This easy-to-use site provides links to each of the new features and properties of CSS3. When you click the name of an attribute, you are re-directed to a page that will give you a definition of the property, an example, a snippet of coding and an explanation of how the feature works. This excellent source of information and, like W3Schools, it is free and lets you learn at your own pace.

Types of Generators

When you are ready to play around with CSS3, generators are an excellent learning tool because they let you create code, manipulate it and figure out how it works in the 'real world.' In a broad sense, CSS3 generators fall into two categories: those designed for a specific task and those that attempt to encompass all of the new standards.

Generators for Text and Buttons

  • 3D CSS Text: This tool basically uses the text-shadow CSS3 feature to create a 3D effect with type. The generator is easy to use: simply choose font, color and background color to start. The real fun, though, begins when you start adjusting the angle, height gradient and shadow opacity and you see the 3D effect come to life. When finished with your adjustments, copy coding located below tool and paste it into your style sheet.
  • CSS Tricks: This user-friendly tool lets you quickly create roll-over type buttons in a few easy steps. Using a mix of sliders, color wheels and a drop-down menu for text options, you can create buttons that change color when the mouse hovers over them, have a solid or gradient background and adjust the roundness of the button's corners. The only weakness with the tool is the limited number of available fonts.
  • Best CSS Button Generator: This generator comes with a nice assortment of customizable button templates. Once a template is selected, you choose font preferences from the seven options and change colors, which is common on most button creators. With this generator, however, you can include CSS3 options like a box shadow for the button, text shadow for the font or adjust the roundness of the button's corners.

Generators for Animation and Transition

  • CSS 3D Transforms: This is an excellent tool for creating and understanding how the transition feature works. With this generator, you have control over virtually every aspect of the creative process. You can alter text size and change the shape and size of the box, but the really interesting aspect is learning how to rotate, skew and animate your creation. Coding is displayed inside the generator directly below your object -- simply copy and paste it into your style sheet.
  • CSS Animate: This is along the same lines as CSS 3D Transforms, but a nice added feature of this generator is the built-in examples. You click on an example you want to try and then hit the play button to see how it functions on the monitor. Tweak how it reacts by clicking on a keyframe on the upper right side of the page and adjusting the corresponding arrow in the workspace. Style sheet coding is created directly below your animation.
  • Animate.CSS: While this one isn't quite as user-friendly as the other two (because you do not get to view your finished project), it has many pre-built examples. You can click on each example to understand what the animation will be, then click custom build to create your own. The custom build page is a series of check boxes to select or unselect depending on the type of animation you want to create. You can also set the duration of the animation on this page. Once you have created your animation, click the build it button at the bottom of the page and the style sheet will automatically be created for you.

Generators for All Features

  • CSS 3.0 Maker: Easy navigation at the top of this generator lets you select any one of the CSS3 features you want to use. Once you have selected a feature, make adjustments to your creation by using the tools located on left side of page. Once you have completed your design, copy the coding located on the right side of page and paste it on your site.
  • CSS3Gen: This may be the most visually appealing of the CSS3 generators. The tool is laid out in a way that allows one-click access to any of its main CSS3 features. Once you select the feature you want to create, the tool will appear to let you make any necessary adjustments. Coding is displayed directly below your work. The only downside to the site is it displays a pop-up window after a couple of moves asking you to 'like' the application on Facebook.
  • CSS3 Playground: The first compelling feature of this generator is the ability to move your creation around inside the workspace. To the left of the canvas are all the features and the tools to adjust them. Style sheet coding appear below the workspace. The generator also outputs an interesting extra block of information -- text that shows how the style is read by the browser.

Using Code Snippets

Even though generators are excellent tools, sometimes all you really want is the coding without all the work. If you find yourself in that situation you can use CSS snippets. If you take the time to examine and manipulate the snippets you can still get a good grasp on what a feature is designed to do and how it works.

Browser Verification

Since not all of the new standards have been adopted by the major browsers, it is a good idea to double check if a specific feature works in the browser installed on your machine before you start creating and testing code.

Using a CSS3 Generator