Hot on HuffPost Tech:

See More Stories
Engadget for the iPhone: download the app now
AOL Tech

CSS3 Playground lets you experiment with new CSS features and generates code

css3playground

I have recently been experimenting with CSS3 box properties for my own personal site. I was thrilled with how easy it was to create a box with rounded corners, some shading and a border – it was really trivial.

That was even before I found CSS3 Playground. Had I found this neat little tool before, I would not have had to hand-code a single line of text.

Like so many other showcases and playgrounds, it's basically a canvas with a bunch of sliders. The sliders let you visually control a CSS div. You can set a ton of CSS3 properties, and watch how they affect the div in real time. Skew it, rotate, zoom in, play with borders and shadow, rounded corners – it's all there, and it's very accessible and fun to play with.

The bottom pane of the window has all of the style declarations you've visually set, both in JavaScript syntax and as CSS. You can just play with the sliders to get it to look just right and then copy/paste it into your own site. Neat!

[Thanks, Yaara!]


Tags: chrome, CSS3, designtips, firefox, future, web2.0