Tuesday, October 6th, 2009

Interactive CSS 3 Generator

Category: CSS

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:

  1. -webkit-border-radius: 10px;
  2. -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  3. -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
  4. -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:

[WidgetPad is a] collaborative development environment for developers to develop fully-interactive, stand-alone, downloadable SmartPhone applications in HTML5, CSS3 and Javascript. You don’t need to install any special development tools or learn any platform-specific API sets. WidgetPad offers everything you need — project management, source code editing, debugging, collaboration, versioning and even distribution — in your own browser!

Posted by Brad Neuberg at 7:15 am

2.9 rating from 35 votes


Comments feed TrackBack URI

Wow… it doesn’t let you control any of the properties, beyond toggle on/off?

Comment by eyelidlessness — October 6, 2009

@eyelidlessness: It’s more of an interactive teaching tool. That’s why I was saying expanding something like this could be a powerful tool.

Comment by Brad Neuberg — October 6, 2009

Firefox 3.6a also supports gradients, which are interesting for shiny buttons and other effects; John Allsopp has a few interactive tools where you can play with gradients (linear and radial) and shadows (text and box) using sliders etc.

Comment by Schill — October 6, 2009

So here’s support some support for the -moz prefix, and an editable textarea

Comment by Drew81 — October 7, 2009

Here’s my take on the “challenge”:

It dynamically gets the vendor prefix, checks whether the property is supported with or without it and as one can see from the code, it’s easily extensible to support more CSS3 properties.

Good morning everyone :-)

Comment by LeaVerou — October 8, 2009

it never ceases to amaze me that all these functions are available in office 2007 yet MS have not put them in IE yet. i guess they are waiting for the specs to finalise so they dont do thing differently to everybody else… again.

Comment by bruxia — October 11, 2009

Leave a comment

You must be logged in to post a comment.