CSS 3 Generator
Interactive CSS 3 Generator from Ajaxian by Brad Neuberg 9 people liked this 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: css3_generator_screenshot Which results in the following code: PLAIN TEXT CSS: 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!
Fonte: Ajaxian
Tags: ajax, css, javascript
css | Filipe Teixeira Nunes | 
09/10/2009 16:21 | 
Comments (0)
Subscribe