28 Comments
- marcoionox, on 09/21/2008, -1/+12You should add some JavaScript to make it more dynamic; Otherwise it'll be a static chart and you could have done that with an Excel print screen.
Anyway, good article, rounding up the great CSS techniques. - nyde, on 09/21/2008, -1/+11The examples just goes to show that with CSS, sky's the limit with what you can do. I can see the scatter plot techique transformed into a line graph with some Javascript.
- VerticalEvent, on 09/21/2008, -0/+8In CSS, they should load faster, as it's all generated as the page is loaded,
Excel Pictures are static pictures and needed to be downloaded as such. - webkami, on 09/21/2008, -1/+9Sadly when I will need one, I will forget about this link.
Bookmarked anyway. - 15charmaxwtf, on 09/21/2008, -0/+6http://code.google.com/apis/chart/ Not css but perhaps quite useful, nonetheless.
- Mootabolife, on 09/21/2008, -1/+6I'm one of the people that hate waiting for those dynamic charts to load. And when they do finally load, they usually glitch up and forget to show some data. If you're doing a powerpoint and one of the graphs is a point you have yet to make.. then I see the point. But charts aren't normally the most exciting of web content to begin with..
What are the benefits to doing these charts in CSS vs. Excel pictures? - RickyTheRiot, on 09/21/2008, -0/+4"You should add some JavaScript to make it more dynamic"
I think you've missed the point here. He is doing them in CSS because it's accessible and _not_ script driven. Even then if you were to do it dynamically (and thus not accessible) you would use SVG, VML or the new Canvas capabilities.
In regard to the article, some good, if far from new, techniques. - johnsathinkin, on 09/21/2008, -0/+3Great examples of how powerful CSS is.
- MtheoryX, on 09/21/2008, -0/+31. Use Delicious to bookmark
2. Add meaningful tags
3. ????
4. Profit! - str3ama, on 09/21/2008, -0/+2accessibility wise it's best to always include your raw data numbers like the conclusions/totals so that if someone has css disabled they can still see the final numbers.
- theadvinci, on 09/21/2008, -0/+2Great list and great idea. This will save me some photoshop editing :)
- jggube, on 09/21/2008, -0/+2Accessibillity is one good reason. Screen readers read your HTML document. It gets to an image (Excel pictures) and you have the title attribute to describe the data you presented. It gets to a table element or unordered list, and it's readable.
- esuomikim, on 09/21/2008, -0/+2In the first link we can see some "professional SEO" techniques... o_O
Geez... How could one do such a stuff on a page which source would be for sure seen by many people?! It's sad... - WebDeveloperSF, on 09/22/2008, -0/+1Always like seeing new ways to make web charts!
- xpirtdesign, on 09/25/2008, -0/+1Wow those are the the nicest blog designs i've ever seen...CSS is badass!
http://xpirtdesign.com/seo-tips - amoeba, on 09/22/2008, -0/+1wow, I didn't know about that, looks like a good service!
- ader3, on 11/08/2008, -0/+0http://www.ader3.com
http://chat.ader3.com
http://forums.ader3.com
http://dir.ader3.com
http://www.youtuadabia.com - f54280, on 09/21/2008, -2/+1Sure, the sky is the limit.
Unless you want a pie chart, in which case all your CSS is just useless, and you're back to server-side images, SVG or canvas tag...
IMO, CSS is a (badly designed) declarative language that is extremely over-abused. - soopertoll, on 09/21/2008, -3/+2DUDE! GIF! PNG! WTF is so unaccessible about these?
Or what person that should be able to read your chart can't read gif-files? - nubnub, on 09/21/2008, -4/+1Hmm.. Warcraft is 1 word.
- RickyTheRiot, on 09/21/2008, -3/+0.. ignore ...
- Baryn, on 09/22/2008, -5/+1You should have been aborted.
- ChayesFSS, on 09/21/2008, -6/+1no counter strike:Source no care



What is Digg?
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official