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
As you can see, this tool is simple to use with Horizontal Length, Vertical Length, Blur Radius and Shadow Color. The code is output in a single line of CSS.
Box Shadow
As you can see, the box shadow tool is much like the text shadow tool. One major difference is the Inset option which is a simple “Yes” or “No.”
Text Rotation
The text rotation tool is also simple to use and is set up for Internet Explorer.
@Font Face
@Font Face offers you control over the font, the size, style and font weight. While this was useful, the choice of fonts as paltry, with only three being offered and ones that I’ve not seen before. This is one section that could really use some beefing up, in my opinion.
Conclusion
Overall, I like the functionality of this web based tool, which is great for sparking a lot of useful ideas. It’s also super simple to use and gives you downloadable code with vendor prefixes. On the down side, some of the tools could use some work, either to beef them up or simplify them.
