{"id":14383918,"url":"https://github.com/pixelastic/css-flags","last_synced_at":"2025-04-09T20:02:30.185Z","repository":{"id":21127040,"uuid":"24427921","full_name":"pixelastic/css-flags","owner":"pixelastic","description":"Flags of the world with only one div","archived":false,"fork":false,"pushed_at":"2019-01-08T16:10:09.000Z","size":3496,"stargazers_count":308,"open_issues_count":0,"forks_count":57,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-09T20:02:17.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pixelastic.github.io/css-flags/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelastic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-24T18:46:05.000Z","updated_at":"2024-11-05T06:55:57.000Z","dependencies_parsed_at":"2022-08-03T00:15:21.859Z","dependency_job_id":null,"html_url":"https://github.com/pixelastic/css-flags","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelastic%2Fcss-flags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelastic%2Fcss-flags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelastic%2Fcss-flags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelastic%2Fcss-flags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelastic","download_url":"https://codeload.github.com/pixelastic/css-flags/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103865,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-28T18:01:03.377Z","updated_at":"2025-04-09T20:02:30.149Z","avatar_url":"https://github.com/pixelastic.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# CSS Flags\n\nRecreating all the flags of the nations of the world in pure CSS, using only one\n`div` per flag.\n\nYou can see it live on [https://pixelastic.github.io/css-flags/](https://pixelastic.github.io/css-flags/)\n\nThis side-project has no real-world application, it was just an exercise to push\nthe boundaries of what I know about CSS. Trying to use the language to do things\nit wasn't meant to do in the first place taught me a lot about the language.\n\n## Running the project locally\n\n```sh\nbundle install\nnpm install\nnpm run serve\n```\n\nThe website will then be available on http://localhost:4001/.\n\n## Contributing\n\nIf you've spotted an issue with the rendering of a specific flag or if you know\nhow to do one of the missing flags, I'm open to pull requests.\n\n## Compatibility\n\nI've only tested the rendering on Chrome and Safari so far. I plan on making it\ncross-browser but I need to add visual non-regression testing first.\n\n## Sources\n\nTo create the flags, my three most important sources were the [Wikipedia][1],\n[CRWFlags][2] and [Vexilla Mundi][3]. CRWFlags contains valuable information\nabout every flag history, allowing me to better understand how they were\nconstructed. Vexilla Mundi contains handy construction sheet images with\ndimensions and angles.\n\nI also used [this list][4] to get the list of all countries with their three\nletter ISO code.). [This website][5] also gives a nice overview.\n\nNot all flags have an exact definition of the colors to use. Best case scenario,\nwe have the official RGB/Hexa (or even Pantone) name of the color. Worst case,\nwe have nothing and have to use the color used on the Wikipedia or Vexilla\nMundi, even if it is not the official one.\n\n## Icons\n\nTo be able to display some of the very specific symbols used on some flags,\nI had to craft my own icon font, using [icomoon.io][6].\n\nI had to find svg versions of all the symbols used. Sometimes the symbols\nalready exists in the UTF8 table, so I just have to grab them from existing\nfonts (or use [utf8icons.com][7]).\n\nBut more often, I had to use Vexilla Mundi. The website provides nice png images\nof all the symbols. Unfortunately, the symbols they provide are already colored,\nand I needed them black to use in the font so I was able to define the color\nmyself.\n\nThe following script will do exactly that:\n\n```\nconvert input.png \\\n        -alpha off \\\n        -fill black \\\n        -colorize 100 \\\n        -alpha on \\\n        output.png\n```\n\nI then had to trim the image to remove any whitespace left around the symbol:\n\n```\nconvert input.png -trim output.png\n```\n\nThen, I need to convert the png to an svg. I couldn't find any commandline tool\ngiving satisfying results, so I had to use an online service to do it:\n[online-convert.com][8]\n\nOnce I got the svg, it is just a matter of uploading it to icomoon, center the\nsymbol, scale it and adjust the border. I also used the reserved namespace in\nthe UTF8 table for custom characters. And finally exported the font.\n\n## FAQS\n\n### You're using half pixels. That does not make any sense.\n\nOk, that's not really a question, but I'll explain anyway.\n\nI try to use percentage as much as I can, when it makes sense. Percentage are\nrelative to either the width or the height of the flag. When doing\na tricolore flag, I will use 33.33% as the width of each stripe for example. But\nas soon as I need to draw a square that has the same width than height, I can no\nlonger user percentage values, I need real, absolute, pixel values.\n\n\n\n## Related projects\n\n### img2css\n\n[http://github.com/pixelastic/img2css/](http://github.com/pixelastic/img2css/)\n\nCommandline tool to convert any image (jpg or png) to full CSS. This will\nreplicate all pixels of the initial image using numerous `box-shadows`.\n\nThis works wel but results in really heavy generated CSS (several MB), so\nI choose not to use it in this project.\n\n### pantone2hex\n\n[http://github.com/pixelastic/pantone2hex/](http://github.com/pixelastic/pantone2hex/) \n\nCommandline tool to get an approximation in hexadecimal of a Pantone color\nvalue. Really useful as Vexilla Mundi gives color values in Pantone.\n\n\n### Vexillum\n\n[https://github.com/talgautb/vexillum](https://github.com/talgautb/vexillum)\n\nSomeone else had the same idea.\n\n## Tips and tricks\n\nHere is an incomplete list of the tricks I had to use:\n\n### Invisible text-shadow\n\nI sometimes put an invisible symbol in an `after` or `before` element (through\n`color: transparent`) and positioned it at `top:0; left: 0`.\n\nThen I added several `text-shadow` to it, with a full color. Doing so helped in\ngetting the coordinates right because everything is then relative to the origin\n`0,0`.\n\n### first-letter / first-line\n\nWhen I needed to add more than 1 symbol in an `after`/`before`, or if I needed\nthe same symbol, but on different sizes, I had to be sneaky.\n\nBy setting a `content` of `\"XY\\AZ\"` and then using both `first-letter` and\n`first-line`, I was able to independently target `X`, `Y` and `Z`. `\\A` is the\nspecial character to add a new line in a `content`.\n\nDoing so let me use three different symbols, with different color and sizes with\nonly one pseudo-element.\n\nIt is impossible to apply any `transform` (like a rotation) on those elements,\nthough.\n\n## TODO\n\nThis project is not over, there are still some elements that I would like to\nadd:\n\n- Link to codepen to let users play with the code\n- Making it work on more browsers...\n- ...which implies that I need to add a visual testing framework on top if it\n- Adding the missing flags\n- Using a clip-path when only one star instead of a font\n- Building the font with npm instead of icomoon.io\n- Adding stars to Brazil\n- Doing the Nepal flag\n- Check if Lea Verou has a background pattern close to the British India\n- Add the Leather Pride flag as an easter egg\n\n\n[1]: http://en.wikipedia.org/wiki/List_of_countries_by_style_of_national_flags\n[2]: http://www.crwflags.com/fotw/flags/country.html\n[3]: http://www.vexilla-mundi.com/\n[4]: https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.json\n[5]: http://files.stevenskelton.ca/flag-icon/flag-icon/examples/countries.html\n[6]: http://icomoon.io/app\n[7]: http://www.utf8icons.com/\n[8]: http://image.online-convert.com/convert-to-svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelastic%2Fcss-flags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelastic%2Fcss-flags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelastic%2Fcss-flags/lists"}