I saw someone doing the Canadian flag in CSS pointing to a British flag in CSS. These experiments are of course quite useless and the Dutch flag is worse, since it is quite an easy flag to make. (Basically three bars; red, white, blue.) Since our flag has only three bars I directly thought it would be nice to try doing it with a single element and some generated content. Quickly the empty element dutch-flaq in the null namespace was created and I started playing with CSS.
To make it a bit of fun I decided to make one full screen flag and one centered. The full screen flag became the alternate style sheet as it had even more browser issues than the centered flag had. Oh, you want to see it? View the Dutch CSS flag.
Opera seems to handle the default style sheet pretty well. (If not perfect.) I did not have a chance to test in Safari, but Opera manages to center the flag. Mozilla does not. Apparently Mozilla has some issues with centering the root element. (Or at least, positioning it.) The full screen alternate stylesheet is worse. If you have some free time to debug it, feel free to do so. Note that it inherits quite some styles from the default stylesheet.
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?
Nit: Britisch?
I was able to reduce the amount of CSS to this and didn't require the use of ::before and ::after pseudo-elements
dutch-flag { display: block; height: 100px; width: 500px; margin: auto; border-top: 100px solid red; border-bottom: 100px solid blue; } However, in order for it to avoid filling the entire viewport vertically, I had to enclose <dutch-flag/> in a parent (root) element. Although it does work perfectly in both Firefox and Opera.
Safari screenshot
Nice, but not entirely correct. The colors of our national flag are officially bright vermilion (rgb: 255, 77, 0) and cobalt (rgb: 0, 71, 171). There don’t seem to be any officially written guidelines on the dimensions, but 3 : 2 is commonly practiced.
Nit: dutch-flaq?
Cool idea, I'm working on a Belgian flag as we speak :)
There you have it: the Belgian flag in CSS. Oh, and the German one is in there, too.
ACJ, I somehow knew I messed the colors up.
Firefox DOES center is here (WinXP, FF 1.0.1)
Giving the body the 'text-align:center;' micht help though
Mathias, you are using markup to design, not CSS. (Although I guess there are some small points to be made from a semantical point of view.)
Niky, also vertically?
Mathias, you are using markup to design, not CSS. (Although I guess there are some small points to be made from a semantical point of view.)
Let's discuss these then, shall we? To be honest, I don't quite get it. How can a flag be designed using only CSS, and no markup? You mean I should create an element in the null namespace, like you do? By the way, aren't Stu's British flag and Matt's Canadian flag doing the same?
Questions, questions...
It is of course irrelevant how other flags are created. If Google uses invalid markup, do you? Anyway, there should be markup of course, but not more than absolutely necessary. Since the representation of a flag should actually be an image using CSS is already incorrect, but creating a lot of elements for every single color is just not needed. Especially if the flag in question is designed using horizontal or vertical bars.
Philippe, is that Safari rendering the alternate stylesheet? Or does Safari not recognize it as an alternate stylesheet?
I don't see what the problem is with using markup for the flags, it's not like it matters much since this is all just playing with CSS and markup.
You wouldn't sriously want layout to affect content, would you? (Something you'd get if you were to replace images with CSS things)
Anyway, there should be markup of course, but not more than absolutely necessary. Since the representation of a flag should actually be an image using CSS is already incorrect, but creating a lot of elements for every single color is just not needed. Especially if the flag in question is designed using horizontal or vertical bars.
I have a container div with the class belgian-flag. Then, I only have one element per colour, i.e. three spans in total, with the classes black, red and red. Is that too much? What do you suggest? Is it even possible to get rid of some code here?
Mathias, my Belgian flag. (It also links, like yours, but uses a single element.) It only works correctly in Opera though, but browsers suck.
why is your flag experiment any less "useless" than the links you provided? that's a pretty harsh statement you made.
flump, could you perhaps quote the section where I said that? (Perhaps rereading the post before making such a comment would be better.)
These experiments are of course quite useless and the Dutch flag is worse, since it is quite an easy flag to make.
I think what Anne said was more like the Dutch flag being more and not less useless than the Canadian and British flags.
Everything depends on what you think is useless of course. The flag things make you think more about things you can do with CSS, which is good. But you won't get anything directly useful from making a flag in CSS.
I hope I'm not the only one who thinks making flag element and then style it to look like a flag is not something you would want to do on anything but a play/test page.
I think I won't use any of this techniques in the future but I learned more and more about the possibilities of CSS.
It was a fun thing making this Surinam flag with CSS.
Cool! Someone also did a Brazil Flag.
