Countries flags developed using only CSS3

  • By Raphael Fabeni
  • Last update: Apr 2, 2022
  • Comments: 2

Flags CSS3

Countries flags developed using only CSS3. | Demo

CSS3 Flags

Installing the flags

  • In the root folder, run npm install for install all the dependencies.
  • Run npm start for run the initial build and start the project at http://localhost:3000.
  • It is possible to run npm run dev for start the develpment mode with watch task enable (it's necessary run a initial build before).

Thanks for Daniel Eden for some animations in awesome animate.css.

Inspired by A Single Div, despite the fact I didn't worry about using only one div.

License

MIT License © Raphael Fabeni

Github

https://github.com/raphaelfabeni/flags-css3

Comments(2)

  • 1

    Small JavaScript improvements

    Just added grunt-cli as a dev-dependency, added 'use strict' to the script, removed unused variables and moved the last flags check out of the for loop, since it just need to run once.

  • 2

    Bump node-sass from 3.13.1 to 4.14.1

    Bumps node-sass from 3.13.1 to 4.14.1.

    Release notes

    Sourced from node-sass's releases.

    v4.14.1

    Community

    Fixes

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^, 14**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13, 14
    FreeBSD i386 amd64 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+ ** Not available on CentOS 5 ^ Only available on x64

    v4.14.0

    Features

    Fixes

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^, 14**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13, 14
    FreeBSD i386 amd64 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+ ** Not available on CentOS 5 ^ Only available on x64

    v4.13.1

    Community

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    v4.12.0

    https://github.com/sass/node-sass/releases/tag/v4.12.0

    v4.11.0

    https://github.com/sass/node-sass/releases/tag/v4.11.0

    v4.10.0

    https://github.com/sass/node-sass/releases/tag/v4.10.0

    v4.9.4

    https://github.com/sass/node-sass/releases/tag/v4.9.4

    v4.9.3

    https://github.com/sass/node-sass/releases/tag/v4.9.3

    v4.9.2

    https://github.com/sass/node-sass/releases/tag/v4.9.2

    v4.9.1

    https://github.com/sass/node-sass/releases/tag/v4.9.1

    v4.9.0

    https://github.com/sass/node-sass/releases/tag/v4.9.0

    v4.8.3

    https://github.com/sass/node-sass/releases/tag/v4.8.3

    v4.8.2

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.