CSS 3 Generator

Inter­ac­tive CSS 3 Gen­er­a­tor from Ajax­ian by Brad Neu­berg 9 peo­ple liked this Many browsers have been exper­i­ment­ing with new cus­tom CSS prop­er­ties lately. Keep­ing track (and learn­ing how to use them) can be a bit of a chal­lenge. Via Wid­get­Pad comes a nifty CSS 3 Gen­er­a­tor that helps you under­stand the new CSS 3 fea­tures in Webkit with an inter­ac­tive tool that will build up and show how each new prop­erty affects an ele­ment. Here, for exam­ple, we see the results of apply­ing rounded cor­ners, box shad­ows, reflec­tions, and a trans­form to an ele­ment: css3_generator_screenshot Which results in the fol­low­ing 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 bot­tom, from(transparent), color-stop(0.5, trans­par­ent), to(white)); 4. –webkit-transform: rotateZ(15deg); The CSS 3 Gen­er­a­tor works on any webkit based browser, includ­ing Safari, the iPhone, and Chrome. Here’s a chal­lenge to the com­mu­nity: can you cre­ate an enhanced ver­sion of this that works with all the new CSS 3 and vendor-specific prop­er­ties, includ­ing on IE and Fire­fox, hid­ing the options that don’t work on spe­cific browsers? That would turn this into a more gen­eral pur­pose edu­ca­tional and test­ing tool that would be very valu­able. Even bet­ter if you open source it and we can host it on the Open Web Devel­oper Net­work we’ve been kick­ing around. Drop me a line if you cre­ate such a thing As a side note, I had never seen the Wid­get­Pad web­site where this is hosted before this which looks quite inter­est­ing. From the site: [Wid­get­Pad is a] col­lab­o­ra­tive devel­op­ment envi­ron­ment for devel­op­ers to develop fully-interactive, stand-alone, down­load­able Smart­Phone appli­ca­tions in HTML5, CSS3 and Javascript. You don’t need to install any spe­cial devel­op­ment tools or learn any platform-specific API sets. Wid­get­Pad offers every­thing you need — project man­age­ment, source code edit­ing, debug­ging, col­lab­o­ra­tion, ver­sion­ing and even dis­tri­b­u­tion — in your own browser!

Fonte: Ajax­ian