Canadian Flag in CSS

Canadian flag in CSS (screenshot).

Via Anne van Kesteren (again), I have found a site with a pure-CSS rendition of the Canadian flag (the image here in my blog is a screenshot, not the live CSS). It’s a little squished, granted, but at least it’s the right way up.

Now, let’s see the XSL-FO version of the Canadian flag: any volunteers?

About David Megginson

Scholar, tech guy, Canuck, open-source/data/information zealot, urban pedestrian, language geek, tea drinker, pater familias, red tory, amateur musician, private pilot.
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

4 Responses to Canadian Flag in CSS

  1. Aristotle says:

    Wouldn’t this rather be a job for SVG? Wherein it would be trivial to do, as well?

  2. You are right that SVG (or Postscript), and not CSS or XSL-FO, is the easy way to do this. In this case, though, it’s an attempt to test the boundaries of a stylesheet’s layout capabilities (as with the Canadian flag I pointed to).

  3. Just for grins, I tried pulling up that same code in IE and managed to get the following results… I may see if it can be tweaked to work.

  4. Jeff says:

    It looks great with Firefox, but it’s a mess in IE6 (not surprising). Nevertheless, it’s a neat CSS trick.

Comments are closed.