The CSS3 Playground is a web application for experimenting with some new css3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing/limiting the experience on browsers that does not support them (=Internet Explorer 8.0 and older). But there are also styles that may need better replacements on Internet Explorer such as rotation, and I hope I will have the time to add more in the future.
I’m a developer and not a web designer, but that doesn’t keep me from learning and experimenting with html5 and css3 stuff. The inspiration for this web application came from some really good talks at Future of Web Design in London 2010. I wasn’t there, but purchased the recorded videos which I can recommend to all interested in web design (and web developers too, obviously). The recorded quality isn’t perhaps the best, but the speakers and the content made up for that. Especially Dan Cederholm and Denise Jacobs.
I wasn’t aware of the philosophies “Progressive enhancement” and/or “Graceful degradation” previously so this was a bit of a late awakening for me. Now I see what has been brewing in the web design and browser world for a while and why Microsoft finally was pushed to comply a lot better to all things css3 with Internet Explorer 9.
Then, of course, it’s another story that html5 and css3 are not standardized yet.
I have mostly looked at jQuery previously, but I will investigate Dojo even further now with the good experiences I’ve had buildning CSS3 Playground.
The best specification of all css3 properties and browser support that I’ve found is Where can I use. I used that specification and the linked samples and documentation to learn about the specifics of the css3 styles that I wanted to support in the web application.
So I recommend you try it out. I hope it will be a better way to try out some color and shadow combinations than to type the css manually and use your ordinary tools and previews. It will of course be of most use to you who know css pretty well, but has not had the time to check out css3 yet.
Add more preview boxes with the button. When changing the styles, only the last box clicked will be affected. I didn’t want to distort the preview with a visual selection effect for the current box, so besides a small transparency animation when clicking other boxes, you won’t be able to see which box is actually the current one. Remove the current box with the button.
Below the preview, you will see two collections of styles. The left one is the one you should use (copy and paste). It contains the styles for different browsers. The right one is read live from the browser of your choice and it might be interesting to see how different browsers actually chose to store the styles, but you should not copy and paste that part in your web pages and stylesheet files.
My favorite styles that I will start to use are the easy ones such as border radius and box shadow. Considering how easy they are, the difficulty will probably be not to overuse them.
Web application was updated to version 1.1 on august 17 with the following: