Web design articles, tutorials, and more.
To make the web impressive.
CSS3 Click Chart
By Louis Lazaris on February 3rd, 2010
Categories: Markup & Style, Web Design Articles | 14 Comments
Since my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.
The initial release only has 8 examples, with more to be added in the future. Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
The box that opens gives a description along with browser support, an external link (usually W3C info), and some example syntax taken from the CSS of the page itself.
The CSS3 properties included are:
- box-sizing
- border-radius
- shadows
- RGBA colors
- multiple columns
- HSLA colors
- gradients
- multiple backgrounds
I don’t claim to be a CSS3 expert, but I thought this would be a good way to gradually compile all the newest CSS3 properties, along with info on each, so I can start learning them myself and use them in future projects (gracefully degraded, of course).
Please offer your comments on any that are missing, or any corrections. The click chart is best viewed with Chrome or Safari.
14 Responses
Post a Comment
NEW COMMENT RULES: I no longer have any tolerance for people that use blog comments for link bait and branding. Although comments are pre-approved, comment rules are as follows:
- No keywords in the "name" field
- No company names in the "name" field
- Real personal name only
- Constructive comments only
If any of the above rules are broken, one of the following will happen:
- Your comment will be deleted; or
- Your name will be replaced with the alias from your email address
I apologize for the inconvenience, but I'm no longer interested in comments that detract from the discussion. Thank you for your cooperation.
Nice set of examples. I couldn’t help but notice that the hsla values that you give in your CSS are converted into either rgba or hex values by the browser, I wonder why that is?
Hey Russell,
I’m not exactly sure what you mean. The syntax for HSLA is:
background: hsla(207,38%,47%,.8);
So, that’s what you’ll find in the CSS. What did you see that indicated that something was being converted?
Great css chart. Thanks
Don’t know where you got the idea that Opera uses proprietary CSS properties, because it doesn’t. It never has used any “-o-property” rules and AFAIK they are not intending to.
Hey Scott,
First, I haven’t done much testing at all in Opera, but I do plan to do so when I update the chart. Also, it’s not true that Opera hasn’t used proprietary CSS. In fact, they explain some limited use of it in this article:
http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/#css3
The reason I added the -o-property references to most of the properties is to ensure that any supported by Opera would work. I don’t know which ones they now support, and which ones they don’t. Plus, some of them they will support natively without proprietary prefixes, so those will work fine. I was just playing it safe. It’s an experimenatal page that I’ll be updating often.
Update:
I’ve gone through and removed the -o references in the CSS, except in the case of “box-sizing”, because evidently it was used at some point in Opera.
It seems that Opera has very little CSS3 support, even in version 10.10.
Very informative. Thnx
Hi. Thanks for your post.
But, you had one problem.
‘Gradients’ and ‘Multiple Background’ example are same code.
Please check example code.
Lee,
Nice catch, thanks for spotting that. I’ve corrected it.
Hey! This is a nice cheat sheet. What makes it best viewed in Chrome or Safari? Looking at the CSS Firefox is doing everything that the WK* browsers are doing. What’s missing in Firefox?
Hey Christopher,
I’m glad you asked about that, because it reminded me to update to Firefox 3.6. When I created the chart, I was using Firefox 3.5, and the last two items (gradients and multiple backgrounds) were not showing up in Firefox. What’s interesting is that the gradient looks different (different color, different direction) than in the other browsers.
Anyhow, I’ve now changed the “best viewed” line to specify browser versions. Thanks!
Thanks! We’re generally closer to the final spec than the other browsers since we were doing our work based off the proposed spec.
Re: the colors: what’s the test case? I don’t think we’re doing anything odd there with color profiles vs. other browsers. (We’ve got proposed changes that would bring us into line with the what the CSS specs say instead of what every browser does, but that’s a different story.)
Hey Christopher,
When you left the first comment, I didn’t realize you worked for Mozilla. Thanks for commenting on this.
And about the colors, I really don’t know why there’s a difference. I haven’t had time to look at it in depth yet, as I just upgraded to 3.6.
I’ll probably take a look at it when I do some updates to include more CSS3 enhancements in the chart.
Hey Louis,
Here’s why they look different between Webkit and Mozilla… the declarations are different:
background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
background: -moz-linear-gradient(right, #340000, #B78330 70%, #FEFDA1);
Also, for the HSLA colors, it seems like code inspectors(FireBug, Chrome’s built in inspector) convert the HSLA color to the nearest matching RGBA color. Whether or not this would cause unexpected results is beyond me, I’m generally content using hex or RGBA for my colors.