Review: CSS3 Maker

By Nathan Segal

In this article we look at CSS3 Maker, a web-based tool which allows you to create CSS3 for your web projects.

On the main tab, your options are: Border Radius, Gradient, CSS Transform, CSS Animation, RGBA, Text Shadow, Box Shadow, Text Rotation and @Font Face.

Looking at the interface, on the far left is the CSS Styles panel. In the middle, you see the CSS Preview Area, information about browser compatibility (which changes with each option) and information about mobile devices at the bottom. On the far right is the CSS3 Codeview, which gives you the ability to download the code for your projects. You'll see as you work with the interface, this is a straightforward tool to use.

Border Radius

One of the first things you'll note on the CSS Styles pane is the popup for radius styles. All the ones that you can use are in the screen shot above. For the sake of this tutorial I'll use Double.

In the CSS3 Styles settings you can do some really cool things. First off, you can can control the line width, which is the first step. After that you can control the radius for each corner of the box individually and finish the whole thing off with a color. It's fast and easy and I deliberately exaggerated the settings on a couple of corners so you could see the effect.

Gradient

Next up is the Gradient tool. Here you have only two gradient choices, radial or linear. Underneath you have a number of controls for Start and End Color and control over the starting position of both the H and V position, which was something I really liked. What I didn't like is that the controls are a bit confusing to use. It took me a while to realize that the sliders were actually RGB. That didn't help me with color mixing, though. It would have been much easier if they had used a color picker for the starting and ending colors with the ability to refine the color with a numeric entry. Trying to work with the sliders was difficult and confusing.

CSS Transform

As you can see by the screen shot above, the CSS3 Transforms tool is simple to use. You have five options; Rotate, Scale, Skew, Translate or All, which I've made use of in the above example. This allows you to selectively choose which settings you want to use.

CSS Animation

In this section you can animate the box model. Note that while you have control of the CSS Styles using sliders, you're given no information about the duration of the animation, degrees of rotation, etc., which is a bit confusing. Instead, all of that information is in the CSS3 Code View. Once you're satisfied with your settings, you can click on the View Animation button to see it in action.

CSS Transition

With the CSS Transition you can control the position of the box model. You can set the time of the transition, for normal or on hover, transition timing, positioning and more. To save your changes, click on the Save button. This is one interesting tool to play with. It's almost like a video game.

RGBA

RGBA refers to Red, Green, Blue, Alpha. The last setting, Alpha is the transparency. This is an excellent CSS effect and very useful in layouts, especially if you use layers, because it allows for different transparency effects and you won't know what it can do until you try it.

Text Shadow