This article is special, you may ask why. It is because, in my last article CSS Flag: India, I said-
I am starting a new series called CSS Flag....
For further actions, you may consider blocking this person and/or reporting abuse
Unfortunately, some of these contain images and in general they are not scalable (ideally setting something like the font-size on top of them should scale them, but they exclusively use pixels and other absolute units that prevent scaling).
In general, however, great job!
Yes, I have used images and absolute values. This won't make any difference in any of the devices because the container is fixed-sized (I am not scaling any flag and image) and if you are planning to use it for personal work then try to switch to the SVG instead of PNG. :)
Did you implement any type of automation to help get you through all of these? Or did you literally work them all out by hand? If you did all of these by hand, then you have a high degree of patience. Thanks for sharing.
No, I didn't use any automation. i literally code all of them by my hand :)
Impressive
The UK one isn't correct. Here's one I made years ago based on the official specs for the flag.
I misplaced the strips on the UK flag. It's been fixed now. There might be some difference because of the size of the flag, as for all flags I used 300x200 pixel size.
Still not right. Sorry, I'm being a flag pedant 😝
Could you explain a little bit more what's wrong?
It might look weird as it's cropped 300x200
Yes that's right, there are many countries which uses different size flags, but i used fixed size to make them all symmetric in shape.
Squashing mine to fit 300x200 aspect (instead of cropping) gives this:
Excellent exercise.
Notably missing: Taiwan.
Taiwan has been added to the list. Thanks for noticing it.
Taiwan Province of China.
no love for Hong Kong?
Taiwan is a de facto sovereign country. It has its own passports, president, parliament, government, elected officials, politics, elections, foreign affairs, police, army that have nothing to do with the People's Republic of China. It deserves to be on this list.
dev.to/j471n/i-made-all-countries-...
and Trentino-Alto Adidgo/Toscana/Sicilia/... ? %)
Taiwan is a part of China.
From the quality of your comparison it's pretty clear that you're quite litigious about this, so I won't comment any further. I won't change my mind, though.
Wooooaaaa! Jatin, this is soooo dope! 🙌
And holy cow, I remember you saying you were gonna do this:
I'll try to make every country's flag. It's just the beginning :)
Jeez, I thought you just meant that you were gonna do the other 5 I pointed out to you. This is way beyond what I expected. 🤯 You have outdone yourself! 👏👏👏👏👏👏
Thanks so much for creating all these and sharing 'em with us!!
Side note: I also really dig your cover image for this post! 😀
😮 🤯 this is impressive. How did you manage to code so much in such a small span of time ? ... I would have had liked a series rather than all of them at once, because that way I can practice a little bit each time. Regardless, thanks for the article, it will keep me entretained for a long time 👍
I planned to make it as series but later I thought it would be like 195 articles. So, I attached all of them in one place. It was fun to code. I put my other articles and projects on hold for this. Enjoy these 195 codepens 🙂. Now people can access all countries' flags in one article. They don't have to go through the whole series to find a single flag.
It was a bit complicated for me to build these kinds of structures with CSS. That's why I went with PNG.
Nice work, I didn't know about this website seekflag.com, seems useful.
You might already know, but in case you don't, France has a second variant of its flag:
Just so you know, in case you notice a difference somewhere online, you didn't make an error 🙂
Yes, I am aware that France has two flags. I just selected one because they are equivalent. Thanks for the feedback btw. 😊
What a undertake... great job overall 🎉.
But sincerely, svg would do a better and cleaner job than css with images in the real world. However this is a great exercise! Inspired me to try do the Brazilian one without the image... should be possible to get a simpler one.
Yes, svg is the way to go. Try brazilian one and share the link so that people can access that ✨
This is pretty impressive, can imagine how long it took you to do that!
Just one note: since when is the Nepal, Switzerland & Vatican flag a rectangle 🤔
Switzerland's flag has plus sign in the center and that's what I have added. You should try to switch in the desktop mode.
Desktop Mode (image):
Yeah I have seen that, but the Swiss flag is not a rectangle 🇨🇭 compared to others 🇺🇲 😆
About that, I have use the fixed size (300x200) for all the flags. As most of the flags are in rectangular shape and also they will look symmetrical with the same size.
The Dominican flag must have blue in the upper left corner and bottom right corner.
It's been fixed now. Thanks for noticing it. 👍
Oh yeah! How can I forget about Gist. Thanks for the help mate. Well, its going to take a while to update all the flags ✨
Good job!!!
I thought of using SVG, but I couldn't find a platform to host them online such as imgur. That's the reason I had to use PNG. Are you familiar with any platform to host SVG online?
Is my Nigerian flag there? God bless Nigeria.
Yes it is.
Thanks mate :)
Really amazing job, How many hours take for make this?
🎉🇨🇴🇪🇸
To be honest, it took time, I am not sure how many hours, but it took a while to complete it. :)
The title is misleading. I thought you made all the flags using pure CSS and HTML but you actually imported PNG images in half of your flags. You imported PNG images even where you could implement it with pure CSS & HTML relatively easily (example: i.imgur.com/BNJzPa2.png).
If I wanted to have raster graphics in my flags I would just download PNG flags. What's the point to implement only parts with CSS? That does't make any sense to me and, frankly, looks like an attempt to get undeserved attention. You literally wrote in the text:
-- "In this article, I have made all countries' flags by just using HTML and CSS"
which is a lie, sir.
There is a clear disclaimer:-
I have used images (PNG) in some of the flags as well because it was kind of complex to create them.
First of all it's not a disclaimer, but a simple list of notes. Disclaimer is supposed to "disclaim" something. The word is misused here.
Secondly, writing a disclaimer/notes doesn't justify you writing misleading titles or false claims. You can't just write "I've created a sentient robot" and then later in the text add "I didn't really create it, because it's kinda hard".
Okay, I did not write this article, I was just stating the obvious, that there is a Disclaimer which guess what, is titled correctly as "Disclaimer".
There is no reason to hate on what was a pretty amazing feat of writing all the css for most if not all country flags, with sprinkles of png. Sure svg flags are better, but still, pretty amazing that it is all shared in one post. Thank you @j471n
I did recreate (most parts of) 258 flags in SVG... by hand. Back in 2019
took me, I don't know, maybe an hour on average per flag,
and some "extras", just for fun.
It was a PITA. But Hey! My native JavaScript Web Component is only 29 KILO BYTE
Was a fun project to learn how to optimize Web Components.. it wasn't realy about the flags. (and I am not doing updates on wrong flags)
So for highly detailed flags, like Afghanistan, I wrote a fallback to use the major Flag Repos out there.
flagmeister.github.io/
See Result and HTML:
Did you register today just to answer like this? Phenomenal.
But you said one thing correctly: those are necessary conditions. It doesn't mean they're sufficient.
Since you're so new here, I'll point out that it's called "logic" and it's a favorite among developers.
Call me back when you'll have estabilished foreign affairs with other countries' officials. Oh, many have tried. Have fun.
Hi everyone thank you for your great post, I got inspired so I tweaked it a little bit and created in html js and css thanks for the inspiration I hope you like it, it is based on country code input
dev.to/amedalen/app-in-html-to-dis...
Thanks!.
Sometimes I wonder, how do we convert this into SVG?
Manually; see flagmeister.github.io