Pure CSS3 Canadian Flag (and a few others)

I happened upon a few impressive international flags made out of XHTML and CSS through Smashing Magazine's twitter feed and noticed that there was a certain flag near and dear to my heart was missing. So I created a pure CSS3 Canadian flag.

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:

Pure CSS Jamacian Flag.

Pure CSS South African Flag.

Tags: , ,
2010.02.17 12:39 AM | Permalink 0 Comments