Friday, 29 April 2011

CSS: CSS3 generator and CSS3 Please!


We have talked a lot about CSS3. The not-anymore new standard is giving some of us headaches. In this post I will show two incredibly useful tools to automatically create styles for your pages.

CSS3 Generator
CSS3 Generator is a simple page with a few sliders helping to create styles for a container. Basically, moving the sliders and selecting from color pickers, we can change:
1) border radius;
2) box shadow;
3) background gradient;
4) opacity.
When we are happy with the look of the container (through the live preview), we click "Get the code!" and a pop-up with the style sheets opens, ready to be used.

The generator is a very useful tool, quick and easy to use. One important note: CSS3 Generator can create style sheets with minimal IE7 and IE8 support. Impressive!

A big thanks goes to Eric Hoffman and Peter Funk for this remarkable tool.

CSS3 Please!
Another useful page is CSS3 Please! In this case, we have a styled page, where we can toggle CSS3 effects on and off. There's a live preview of our actions, so that we can understand what every single style is actually doing to the container.
The page is commented so it is a very interesting playground and learning tool. Through it, we can really learn what the rules are doing, how they apply to different browsers and finally decide what to - eventually - use in our web pages. In addition to all that, we can change the values of the styles and see the resulting effect, applied live to the container.

The original project was developed by Paul Irish and Jonathan Neal with many other nice people contributing. The project is an open one: anyone can contribute and new features will be introduced in the future.

Hope this will help you in building remarkable style sheets for your web pages. Please, leave your comments in the section below.

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.