Comments on: CSS3 Click Chart

By: agent.superdave

agent.superdave — Thu, 17 Jun 2010 13:05:45 +0000

nice demos. however…
“word-wrap: break word” only works on a fixed width container. if you have a fluid layout, the long line will still try and force it’s way outside the container. there doesn’t seem to be any fix for wrapping long lines. the obly option i can find is to chop the line off with “overflow:hidden”.

By: Michael Tuck

Michael Tuck — Thu, 10 Jun 2010 23:21:13 +0000

Louis, it’s very useful. I’m adding it to my tutorial site’s “toolbox.” It’s also useful to display it in a browser and see exactly what is and isn’t supported just by looking. This is probably most useful for Opera 10.5, which is what I use, and which supports most, but not all, of the properties in your chart.

You’ve done a more thorough job than you may have realized. :)

By: 9 Beispiele für den Einsatz von CSS3 | webdemar.com

9 Beispiele für den Einsatz von CSS3 | webdemar.com — Wed, 19 May 2010 07:32:29 +0000

[...] Eine ansprechend gestaltete und gute Übersicht über verschiedene CSS Eigenschaften hat Louis Lazaris erstellt. Die Live Demo sollte man sich unbedingt [...]

By: Louis Lazaris

Louis Lazaris — Mon, 17 May 2010 16:28:55 +0000

I have, and I’ve mentioned it in a few of my articles and comments on this site and others. Definitely a useful site, thanks.

By: Mikko Tapionlinna

Mikko Tapionlinna — Mon, 17 May 2010 15:03:16 +0000

I posted this to another post of yours and then saw that you wanted the comments here later. So here you go. :)

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.

By: Not Another CSS3 Click Chart Update!

Not Another CSS3 Click Chart Update! — Mon, 17 May 2010 14:40:30 +0000

[...] Comments are closed, but you can leave suggestions and corrections on the original article. [...]

By: More Additions to the CSS3 Click Chart

More Additions to the CSS3 Click Chart — Wed, 05 May 2010 21:38:09 +0000

[...] As usual, feel free to offer any suggestions or corrections. I’ve closed the comments on this post, but you can leave comments at the original article here. [...]

By: Louis Lazaris

Louis Lazaris — Tue, 23 Mar 2010 23:36:27 +0000

Jason, you’re right. I have no idea why those ended up different. I must have pasted the wrong code, or else I assumed the gradient declaration was the same for both browsers.

I’ve changed the gradient, and I’ve also included some proprietary code to get Internet Explorer to recognize it. Thanks!

By: Sumanth

Sumanth — Sat, 13 Mar 2010 17:03:18 +0000

Is it coming in-built with adobe dreamweaver? (CSS3). If it is yes, which version is that?

By: Jason

Jason — Tue, 23 Feb 2010 17:47:32 +0000

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.