Now, this is just a proof of concept, but it could fairly easily be turned into a count down clock, or dynamically incrementing "total donations" type display. To show this functionality, I've added a reset to start the clock at 12:00;00 am, making it flip forward to the current time.

As with the other CSS3 experiments, it currently only works in Firefox, Google Chrome, and Safari (which loses the rounded corners due to an interaction bug with transform-origin and border radius) UPDATE and Opera 10.5. One the nice thing about this experiment, as opposed to the other two, is that the clock still works in IE, even though the flip animation is missing.

Creating Pie Charts with CSS3

After playing around and creating flags with CSS3, it dawned on me that the same methods used there could be used to create Pie charts. Keep in mind that this technique is currently cutting-edge. It only works in the latest versions of Firefox, Chrome,and Safari UPDATE and Opera; and requires browser-specific extensions to CSS to pull off, but it does use elements in the current CSS3 specification, so it stands that eventually the rest of the web will catch up.

However, this method becomes problematic, since we'll have to rotate it. The half-circle above would rotate at it's centre (left-50,top-100). Combine that with the difference in width and length, it would require a lot of horizontal shifting to ensure the centres line up properly. That's a bunch of math or annoying trial and error. Thankfully, there's an easier way. Draw a full circle and use the old-school clip property to only show half:

NOTE: you could use the original half-circle method and set the CSS3 transform-origin property to right, center to move the rotation point. But experimentation with this method revealed that using transform-origin in Safari caused that browser to ignore the border-radius setting (in Safari ver. 4.04 on Windows at least). So for now, stick with full circle and clip.

Now we have a half circle that will rotate around the centre of it's flat edge.

Next, we need to hide it in a way that allows us to show only the part we need to see. So we drop it into another square <div> and clip it too, to display the opposite half.

We're clipping the hold <div>, because we need it to rotate around the same point as the circle.

now we stack all the pie elements on top of each other, and rotate the pie pieces by their appropriate percentage amount — (360*(x*100)) where x is the percentage value — and also rotate each hold div the cumulative amount of each previous pie piece's rotation. So given the following html:

Now, the more astute readers will notice that this works great for pie pieces that are 50% of the pie or less. How can you draw larger pieces? There are two methods. The easiest is to simply draw a full circle and then overlay the other pieces on top. But if you want a discrete piece that you can potentially move out for emphasis, you'll need to do two things: remove the clip on the hold <div>, and add a second pie piece as filler.

As you might be able to tell, I found it easier to draw the white outline around the center leaf, instead of the leaf itself. It's done primarily with border-radius and transform:rotate CSS3 properties, so it only works with the latest versions of Firefox, Safari (which does the best job of rendering it) and Chrome right now. UPDATE 2010.03.02: It works in just released Opera 10.5 now too. I had to add the browser-specific extention for rotate, but it works.

This was so much fun, I decided to do a few others:

The Macedonian CSS3 Flag. - This is barely CSS3 as it only uses border-radius for the center. It looks best in Firefox, but works relatively well in Safari and Chrome too.

The Kenyan CSS3 Flag. Which is actually more impressive than the Canadian flag, if I say so myself. It looks awesome in Firefox and Chrome. Oddly, it failed badly in my version of Safari (4.04 Windows) though. I think it has to do with the fact that I'm combining the border-radius property and a bit of rotating with some old school clip'ing It appears that Safari doesn't yet support the dual value ( r1 / r2 ) eliptical border-radius sttings.

And for those of you using IE, here's some classic CSS flags to look at:

As you can see, there's nothing special in there. Besides the conditionally commented IE6 stylesheet, there are three DIVs to split the layout, and that's it. Nothing a decent web designer wouldn't already have in a page anyway. In fact, only two of those DIVs are required. The "header" DIV is only there because it usually exists in a design. It's superflous to this example. One thing that is vitally important though — assuming you care about IE6 — is the <!DOCTYPE> decleration. What doctype you use is up to you, so long as it triggers "almost standards mode" in IE6.

Next we will look at the base CSS required. You can add more as you see fit. I've commented the code to explain why each line needed:

HTML { height:100%; /* allows body to grow to full window height */}BODY { position:relative; /* otherwise footer will position itself in relation to window height */ min-height:100%; /* makes page start out at least as tall as the browser window */ margin:0; padding:0; /* not strictly required but useful. reset to push body to edges of browser window */}#footer { position:absolute; bottom:0px; /* these two lines will force footer to the bottom of the page. */ height:XXX; /*set to whatever you want */}#content { padding-bottom:XXX; /* must match or exceed the footer height, so bottom-most content doesn't float bellow footer */ overflow:hidden; /* this will contain any floated elements and push the footer down below them NOTE: do not add a height to this element, or this will fail */}

Next, we add a single rule to the conditionally commented IE6 stylesheet:

That's it. We're done. Here's a demo with some minimal extra CSS and content to illustrate the technique.

One caveat with IE6: this will work as is on static content pages, but IE6 will not move the footer down when extra content is added or removed dynamically. Instead it will float where it originally sat regarless of the new content size. To work around this, simply pop the footer's style position to 'static' and back (either directly with <element>.style.position, or by adding then removing a new class) after making the dynamic changes and IE6 will behave as expected.

Also, some more knowledgeable of you may be tempted to skip the conditionally commented CSS and instead "hack" the original BODY rule decleration as follows:

While this will work, it does add unneeded CSS that other browsers need to parse. It's my personal oppinion that IE6 should be the only one doing heavy lifting, CSS wise, since it's the one we're having to work around.