https://pixelastic.github.io/css-flags/

Compagnonnage, CSS et Vexillologie

Tim Carry

Compagnonnage

Chef d'œuvre

  • Découverte
  • Apprentissage
  • Maitrise
  • Perfection
Chef d'œuvre de Tours

CSS

Challenge

Faire l'ensemble des drapeaux des pays du monde en CSS,
avec un seul <div> par drapeau.

Vexillologie

Étude des drapeaux

  • Vocabulaire
  • Couleurs
  • Dimensions
  • Histoire
Fun with flags

Tricolores

  • Belgique
  • Pérou
  • Nigeria
  • France
  • Italie
France

    width: 100px;
    background: white;
    border-left: 100px solid blue;
    border-right: 100px solid red;
        

Répétitions

  • Irlande
  • Côte d'Ivoire
  • Roumanie
  • Guinea
  • Mali
  • Tchad

Tribandes / Bibandes

  • Hongrie
  • Pays-Bas
  • Colombie
  • Ukraine
  • Indonésie
  • Monaco

Vrais drapeaux

  • Algérie
  • U.S.A
  • Nouvelle-Zélande
  • Corée du Sud
  • Macédoine
  • Bosnie-Herzégovine

Plus de bandes

  • Île Maurice
  • Botswana
  • Gambie
  • Thaïlande
  • Costa Rica
Île Maurice

  background-image:
    linear-gradient(180deg, 
      red 0%,     red 25%, 
      blue 25%,   blue 50%, 
      yellow 50%, yellow 75%, 
      green 75%,  green 100%
    )

Superposition

  • Bénin
  • Madagascar
  • Émirats Arabes Unis

  /* Bénin */
  background-image: 
    linear-gradient(90deg, green 0px, green 88px, transparent 88px),
    linear-gradient(180deg, yellow 0px, yellow 50%, red 50%, red 100%);
        

Croix Nordiques

  • Suède
  • Finlande
  • Danemark
  • Norvège
  • Islande

Cercles

  • Japon
  • Niger
  • Laos
  • Bangladesh
  • Palaos
Japon
background-color: white;
background-image: radial-gradient(
  circle at 110px 74px, 
  red 44px, 
  transparent 44px
)
Japon
background-color: white;
&:before {
  content: "";
  width: 88px;
  height: 88px;
  background: red;
  border-radius: 50%;
  position: absolute;
  left: 66px;
  top: 29px;
}

Étoiles

  • Viêt Nam
  • Birmanie
  • Cameroun
  • Liberia
  • Corée du Nord
  • Ghana
Vietnam
  background: red;
  &:before {
    content: "★"; // BLACK STAR (U+2605)
    color: yellow;
    position: absolute;
    top: 30px;
    left: 66px;
    font-size: 88px;
    line-height: 88px;
  }

Symboles

  • Maroc
  • Israël
  • Canada
  • Liban
  • Albanie
  • Angola

Font custom


    @font-face {
      font-family: "Symbols";
      src: url("../fonts/Symbols.woff");
      [...]
    }
        

Plusieurs symboles

  • Honduras
  • Venezuela
  • Cap Vert
  • Micronésie
  • Georgie
  • Martinique
Honduras

&:before  {
  content: "★";
  color: blue;
  top: 48px;
  left: 103px;
  text-shadow: 36px  9px 0px blue, 
               36px -9px 0px blue, 
              -36px  9px 0px blue, 
              -36px -9px 0px blue;
}
        

Croissants

  • Mauritanie
  • Libye
  • Malaysie
  • Singapour
  • Tunisie
  • Turquie
Mauritanie

background-color: green;
background-image: radial-gradient(
                    circle at 110px 41px, 
                    green 45px, 
                    transparent 45x
                  ), 
                  radial-gradient(
                    circle at 110px 55px, 
                    yellow 47px, 
                    transparent 47px
                  );
        

Triangles

  • Tchéquie
  • Djibouti
  • ,
    Philippines
  • Comorres
  • São Tomé-et-Principe
  • Bahreïn
Tchéquie
  height: 0px;
  border-top: 73px solid white;
  border-bottom: 73px solid red;
  border-left: 110px solid blue;
Tchéquie
background-image: linear-gradient(
  180deg, 
  white 0, white 50%, 
  red 50%, red 100%
);
&:before {
  display: block;
  width: 110px;
  height: 147px;
  background-color: blue;
  clip-path: polygon(0 0, 
    100% 50%, 
    0 100%
  );
}

Diagonales

  • Saint-Christophe
  • Namibie
  • Guyane
  • Seychelles
  • Îles Marshall
  • Afrique du Sud

vexilla-mundi.com

Trigonométrie

  1. Pythagore
  2. SOHCAHTOA

SCSS

# Shell
scss -r ./geometry_helper.rb input.scss
# Ruby
require 'sass'
module Sass::Script::Functions
  module GeometryHelper
    def deg_to_rad(value)
      value * Math::PI / 180;
    end

    def cos(number)
      Sass::Script::Number.new(Math.cos(deg_to_rad(number.value)))
    end
  end
  include GeometryHelper
end
// SCSS
$red-stripe-size: cos($alpha) * $height;

Royaume-Uni

Union Jack

  • Écosse
  • Angleterre
  • Irlande
  • Royaume-Uni

Cantons

  • Australie
  • Nouvelle-Zélande
  • Niue
  • Îles Cook
  • Tuvalu
L'important n'est pas la destination mais le voyage
tim@
.com

170/251 (67%)

  • British Indian
  • Mexico
  • Cambodge
  • Kenya
  • Grenade
  • Turkmenistan