Updates to the CSS3 Click Chart

Updates to the CSS3 Click ChartI’ve added five new items to the CSS3 Click Chart. I also added a couple of filter hacks for IE, and corrected some syntax examples.

Each item on the chart includes a clickable heading that opens an info panel on the bottom of the screen displaying a basic description of the item, along with example syntax. To accommodate the fact that the chart is now more than one screen, I’ve integrated Alen Grakalic’s Easy Slider jQuery plugin.

To navigate between the two screens, just use the left and right arrows on either side of the chart.

The new additions to the chart are:

  • Text Stroke
  • Reflections
  • Transforms
  • Transitions
  • Border Images

Again it should be stressed that not all of the items in the click chart are guaranteed to be accepted as part of CSS3, but for now it’s good to know what’s possible in browsers that allow the use of these new and interesting CSS techniques.

12 Responses

  1. Thanks for this update.
    Can we make sortable chart using jQuery?

  2. Lars:

    Very cool. I’ve been looking for a more visual way to compare CSS3 support in different browsers. Having an overview chart / table of the different CSS3 styles with browser support would also be handy to quickly compare overall browser support.

    If you combine this with http://html5test.com/ you’ve got a pretty good way of testing both HTML5 and CSS3 support across browsers and plan for some progressive enhancements.

    • Lars,

      If you click the heading on each item, it opens a panel at the bottom of the screen that displays info about that property including browser support.

      Anyhow, glad you found the chart useful.

  3. Wonderful project, but for the “border-images” is currently not compatible with Firefox 3.6.3 (I’m on OSX 10.6.3).

    The corners appear normal, bu the border doesn’t fit all the way around as it does in Webkit.

    • I know, I couldn’t figure out why that was happening. Unfortunately, there isn’t a lot of info on the border-image property online (at least nothing useful that I could find), and I personally don’t find it to be a very useful property at all, so I really don’t care how it looks cross-browser.

  4. Louis,

    Great, simple, clear examples. It makes me want to start messing with some CSS3 right now.

    I notice one little typo for the next time you’re making updates: http://skitch.com/jcasimir/dyq66/dock

  5. Very thanks ! it’s only the addition properties for css3 or any things!

  6. This your demo doesn’t work in Chrome 5.0.344.9 (don’t see anything while clicking on ?). Just for you to know.

    • Slaffik, you don’t need to click anything to get it to “work”. Each example on the page is displaying a different CSS3 feature.

      The “?” displays “help” info, which is found in the panel at the bottom. (Syntax, browser support, etc.)

  7. Mikko Tapionlinna:

    Have you seen this already?

    http://css3please.com/

    That site has a solution for rotating elements in IE too. And other features as well. I think you might find it interesting.

  8. vijay:

    Thanks for update.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.