Tuesday, October 6th, 2009
Many browsers have been experimenting with new custom CSS properties lately. Keeping track (and learning how to use them) can be a bit of a challenge.
Via WidgetPad comes a nifty CSS 3 Generator that helps you understand the new CSS 3 features in Webkit with an interactive tool that will build up and show how each new property affects an element. Here, for example, we see the results of applying rounded corners, box shadows, reflections, and a transform to an element:
Which results in the following code:
- -webkit-border-radius: 10px;
- -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
- -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
- -webkit-transform: rotateZ(15deg);
The CSS 3 Generator works on any webkit based browser, including Safari, the iPhone, and Chrome.
Here’s a challenge to the community: can you create an enhanced version of this that works with all the new CSS 3 and vendor-specific properties, including on IE and Firefox, hiding the options that don’t work on specific browsers? That would turn this into a more general purpose educational and testing tool that would be very valuable. Even better if you open source it and we can host it on the Open Web Developer Network we’ve been kicking around. Drop me a line if you create such a thing :)
As a side note, I had never seen the WidgetPad website where this is hosted before this which looks quite interesting. From the site:
Posted by Brad Neuberg at 7:15 am