What CSS3 Can Do For You: CSS3 Generators and Other Helpful Tools

written by aext on July 22, 2010 in Tools and Web Design with 17 comments

In my last few posts, I have gone over just some of the many things CSS3 can do—this post will explore some useful tools to help you in your journey of learning and manipulating CSS3.

Generators

Generators can be helpful if you need to get a lot done in a hurry. Deadlines come quicker than you think, and generators can really help you out when you are in a pinch. They can also help you with code if you aren’t quite familiar with it yet.

CSS3 Generator

As the name implies, this is a fully automated generator to help you writing your CSS3 code. The CSS3 Generator will show you the code for all CSS3 compatible browsers (when applicable) and for the following functions:

  • border radius
  • box shadow
  • text shadow
  • RGBA
  • @font-face
  • multiple columns
  • box resize, box sizing and outline

css3 generator

Gradient Generator

Creating the perfect gradient can take a lot of time and effort. I created the sample button below using the Gradient Generator V2.0

As you can see it also created the code for both webkit browsers and FireFox, which are currently the only types of browsers that support gradient CSS3 code.

CSS3 Sandbox

Going a little bit further into gradients, you can use the CSS3 Sandbox tool to create different effects such as linear and radial gradients. You need to be in a gradient supported browser to see the preview box, but the code will generate in a non-supported browser.

css3 sandbox

Cross Browser Rule Generator

CSS3 please! allows you to, “edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done auto magically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet.”

Resources

Knowing the names for colors is an important piece of knowledge. Codenique CSS3 Color Names is a great resource to keep on hand for many common colors you should know.

Another great tool to have on hand is the CSS3 Selectors Test. Once this test is running, “it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.”

CSS3 Selectors Test

Compatibility

With all the features that CSS3 and HTML5 bring to the table, it can get confusing fast what features are compatible on what browsers. Html5readiness offers you some great help. It has broken down the different features these codes can bring, and what browsers are able to support the code.

html5 and css3 readiness

Modernizr

This is a Javascript library that, “adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.”

Modernizr Javascript Library

Modernizr can help you with border-radius along with other CSS3 codes such as RGBa. How it works is that it sends a test of the browser you are viewing in against upcoming features such as border-radius and RBGa. This allows you to have a backup plan for any browsers that don’t support the features you are implementing.

CSS3 watch

The web design community, for the most part likes to share. Someone comes up with a great new way to do something, and many different websites start using it on theirs. CSS3Watch does just that—it keeps an eye out for all CSS3 updates and great designs using CSS3.

The Font Dragger

The Font Dragger is a great tool to utilize when you have written some code and need to test it out. The only catch is you need to be working in FireFox 3.6 to have it work properly. Although this is still a work in progress, this app provides the following:

  • Custom fonts with @font-face
  • Gradients
  • Rounded corners using border-radius
  • Drop shadows with text-shadow & box-shadow
  • Attribute and pseudo selectors
  • Multiple border colours
  • Box model adjust using box-sizing

Font draggr

Between all of the many features CSS3 now offers and the tools available, it is a very exciting time for web programmers. Implementing tools along with new techniques will set you up for success. Browser compatibility may be something of concern for now—but it shouldn’t stop you from practicing these new skills to help you when the compatibility becomes universal.