CSS3 Toolkit: Simple, Interactive CSS3 Design

Today’s review is a little bit technical, as it is specifically aimed for web programmers and designers, or anyone that would like to learn more about CSS. More specifically, we’ll be looking at the newer version of it, CSS3, which comes with a few new goodies like the ability to implement gradients, shadows, border shapes, and other new features in your styles.

These new features, however, are not as easy to code out manually, and making it compatible across multiple browsers is even harder. Today we are reviewing an app that can help web developers to implement these features without getting into too much trouble, as it can help you create new styles and generate the code to implement them. It’s called CSS3 Toolkit, and let’s check it out!

CSS3

CSS or “Cascading Style Sheets” is a language used to give format and styling to otherwise plain markup text pages. It has been widely in use for over 15 years and has seen several releases, the latest of which is CSS3. Among the many new features that it brought to the language, we can find a few styling features used to create gradients, border radiuses and shadows to your objects. All of these are features that CSS3 Toolkit can help you easily implement.

CSS3 Toolkit

CSS3 Toolkit might not be a super complex app like, for example, Hype is. It might not help you visually code a whole site out, but if you are a wep programmer or designer and you would like some visual help for testing and implementing a few of the new features that CSS3 provides over its older version, then this app will be of great help and a huge timesaver to you.

It provides you with a few modifiers for setting up the right visual styles with new CSS3 features like gradients, border radius, box shadows and inner shadows. These styles are shown to you in a WebKit-based preview window that the app has, and then when you are happy with what you’ve been shown you can copy the CSS code output wherever you want to use it. Let’s get deeper into its features.

Features

CSS3 Toolkit consists of a preview window, a code output window, and a toolbar where you can find all of the new CSS3 features that the app can help you implement. You can easily select and deselect any of these features, as well as modify them to create the visual styles that you need. The features that you’ll find in the toolbar are:

Canvas

The first thing you might want to adjust when using CSS3 Toolkit is perhaps the canvas style, which is reflected on the preview that you can see on the app. You have a few options to modify it, such as the width and height, opacity, border width, and the color of the elements (such as the canvas and borders).

Although most of these are pretty basic and you could most likely modify them quite easily in your final code, it’s nice to have the ability to switch them around to get a more realistic preview of your final output. Where things get a little bit harder is with the actual CSS3 features…

Border Radius

The “border radius” feature can help you shape the corners and edges of your objects. In CSS3 Toolkit, you can shape all of the corners together, or you can shape each corner individually to create uneven formed objects.

Gradients

CSS3 Toolkit can also help you create liner gradients with up to 5 “color steps”, and you can even select the angle at which the gradient is formed. Unfortunately, you can’t really make radial gradients as of now with CSS3 Toolkit.

Box Shadow and Inner Shadow

Another available feature is the box shadow, which allows you to create a shadow behind your object, and set the “distance” (or edge offset), opacity, color, blur of the shadow, and the angle at which it is reflected from the object. The Inner Shadow is pretty similar to the box shadow, except it goes into your object instead of outside.

Typography

With CSS3 Toolkit you can also add text inside your objects and style them with CSS3 features, like shadows (including the edge offset, blur, angle, color and opacity), as well as the usual font settings like size, family and other usual type settings.

Code Output

Once you’re done creating your styles, you can easily show the output code by clicking the “Show CSS” button on the bottom right corner. This will show a new window on the side with the CSS code for the class that you’ve created, ready for it to be copied and modified to adapt to your website.

What makes CSS3 Toolkit extra helpful is the fact that its output code already has the appropriate prefixes for each of the different browsers to ensure maximum compatibility, such as the appropriate Webkit (for Safari and Chrome) prefixes and the Mozilla ones (for Firefox).

Conclusion

CSS3 Toolkit might not be a huge app that could help you code a whole site from zero. All it can do is provide some much needed help for using a few of CSS3′s new features that might be a little bit too tough to implement manually. Instead of having to find a reference to find out how to properly implement a gradient or a shadow, with this app you can create them hassle-free and with a responsive preview of the final results.

You should also keep in mind when implementing these new CSS3 features that some of them are not yet fully compatible with most browsers (for example, most versions of Internet Explorer), and probably will not be for a long time. If you are coding for newer, updated browsers (like recent versions of Chrome, Safari and Firefox) these features should work fine, but you should keep in mind that they are still in experimental stages.

What are your thoughts on CSS3 Toolkit?