CSS3 Playground

2010-07-28
After being excited about css3 and using some of its features in my web pages, I realized that I needed some simple tool (editor) for experimenting.

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.

Screen dump of the site

Inspiration

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.

Building

Building this simple web application was also a good opportunity for me to really use a JavaScript user interface library since the application is client side only. I was choosing between jQuery UI and Dijit (Dojo’s ui library) and what made to go for Dijit was the fact that the mouse scroll wheel can be used on slider controls. I thought that made a nice feature when moving shadows and testing other numbers based properties.

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.

Use

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.

http://css3.mikeplate.com

Updates

Web application was updated to version 1.1 on august 17 with the following:

21 Responses to “CSS3 Playground”

  1. Pierre says:

    That’s brilliant.

  2. Priscila says:

    this is ABSOLUTELY GREAT!! thank you so much 🙂 Congratulations!

  3. Clecio says:

    Now web design tools starts to became more practical. Congrats!

  4. Bo says:

    Brilliant! Ability for more boxes and some font settings would be lovely.

  5. webAntoine says:

    very good application

  6. Razvan says:

    Amazing work
    Thank you !

  7. Jono says:

    Love it man. Is there some sort of facebook Like button or advertising I could click on to support your awesomeness? : )

  8. Ed M says:

    This is a great tool and I’d be glad to donate, but sorry, can you give us some clearer and more specific guidance than “Copy the styles under ‘Style as set with JavaScript’ and paste inside your own html or css files to repeat the appearance for your own objects” and “The left one is the one you should use (copy and paste). It contains the styles for different browsers”? I mean, I’m reasonably familiar with HTML, CSS and JavaScript, but I can’t figure out at all how I can incorporate the coding that’s generated here into my pages and produce results like these.

    • admin says:

      @Ed M: Sure, I’ve thought about it and might add a button that generates complete html that can be copied and/or downloaded and not just the css part. A quick sample, which should be placed inside an html file:


      <html>
      <head>
      <style>
      h1 {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 3px 3px 6px #000000;
      -moz-box-shadow: 3px 3px 6px #000000;
      box-shadow: 3px 3px 6px #000000;
      background-color: #EEEE88;

      }
      </style></head>
      <body>
      <h1>This is my headline with css3 styles applied.</h1>
      </body></html>

  9. Ed M says:

    Thanks so much, Mike. Actually, before I came back here I was experimenting on my own, and I figured out how to do it a little different way and one that’s more practical for my purposes: as I normally do, I just created a class under my declarations with the specs generated from your Playgound, and I simply invoke the class wherever I need the styling, e.g., .

    I guess what threw me was the title “Style as set with JavaScript”; that led me to think that somehow I had to incorporate the declarations within an element like but of course that’s something quite different.

    Have just made a generous donation in appreciation for your help and work.

  10. Ed M says:

    Ah, the “code” tag didn’t work in my comment as it did in yours. Let’s try again, substituting long whitespaces for angle brackets:

    Thanks so much, Mike. Actually, before I came back here I was experimenting on my own, and I figured out how to do it a little different way and one that’s more practical for my purposes: as I normally do, I just created a class under my style type=”text/css” declarations with the specs generated from your Playgound, and I simply invoke the class wherever I need the styling, e.g., div class=”playground” .

    I guess what threw me was the title “Style as set with JavaScript”; that led me to think that somehow I had to incorporate the declarations within an element like script language = “Javascript” but of course that’s something quite different.

    Have just made a generous donation in appreciation for your help and work.

    • admin says:

      @Ed M: Thank you for your support. You are right about the phrasing. I’m describing what I’m doing in the application, and not what the user should do. Will be changed. Thanks again!

  11. Rob says:

    Very cool tool. Thanks

  12. […] Mike Plate’s CSS3 Playground […]

  13. avi says:

    JUST BRILLIANT and VERY helpful and useful

  14. Kate Walker says:

    I spent weeks getting my head around css verbage and your tool is so wonderfully visual. Magic! Thank you

  15. Blogghidee says:

    Thank you so much… Meraviglioso: translate wonderful!
    Kind regards from Italy… 🙂

  16. kosmas says:

    Amazed. All in one package.

  17. Miranda says:

    I applied css gradients to my site using your app. On the home page I have “Ipitomy – A phone designed for business” and “SL1100 Communications system”. As you can see the the drop shadow works fine. But the gradient in each one is not visible. I was aiming for a very light gradient starting gray on upper left corner to an almost white or white on lower bottom right.

    the other two modules, “A powerful native ip platform ” and “Axis CCTV” where done with Colorzilla gradient generator.

    Did I miss something?

    Congratulations – Great App!!!

Leave a Reply

Twitter: @mikeplate