CodeinWP CodeinWP

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. abhishek says:

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

  2. Lars says:

    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. Bryan Watson says:

    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. Jeff Casimir says:

    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. Elijah says:

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

  6. slaFFik says:

    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 says:

    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 says:

    Thanks for update.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).