Compagnonnage

Chef d'œuvre

• Découverte
• Apprentissage
• Maitrise
• Perfection

CSS

Expérience

• 10+ années de pratique
• Puzzle à résoudre
• Markup HTML minimal

Challenge

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

Vexillologie

Étude des drapeaux

• Vocabulaire
• Histoire
• Couleurs, dimensions

Tricolores

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

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

Répétitions

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

Tribandes / Bibandes

• Hongrie
• Pays-Bas
• Colombie
• Ukraine
• Pologne
• Monaco

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

Plus de bandes

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

  background-image: 
    linear-gradient(...),
    linear-gradient(180deg, 
            transparent 0px, transparent 37px, 
            blue 37px, blue 74px, 
            transparent 74px, transparent 100%),
    linear-gradient(...),
    linear-gradient(...);
        

Superposition

• Bénin
• Madagascar
• Émirats Arabes Unis

  /* Bénin */
  linear-gradient(90deg, [...], green),
  linear-gradient(180deg, [...], yellow),
  linear-gradient(180deg, [...], red),
        

Croix Nordiques

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

Cercles

• Japon
• Bangladesh
• Laos

  /* Japon */
  background-color: white;
  backgroud-image: radial-gradient(
    circle at 110px 74px, 
    red 44px, 
    transparent 45px
  )
        

Étoiles

• Viêt Nam
• Cameroun
• Birmanie
• Suriname
• Ghana
• Burkina Faso

Étoile

        background: red;
        &:before {
          content: "★";
          color: yellow;
          position: absolute;
          top: 30px;
          left: 66px;
          font-size: 88px;
          line-height: 88px;
        }
        

Symboles

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

icomoon.io/app

• 🍁
• ⛤
• ★
• ✡
• ✸
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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

Plusieurs symboles

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

Plusieurs symboles

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

Croissants

• Libye
• Mauritanie
• Pakistan
• Singapour
• Tunisie
• Turquie

Croissants

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

Triangles

• République Tchèque
• Cuba
• Djibouti
• Sao Tome et Principe
• Soudan du Sud
• Bahreïn

Triangles

  &:before {
    [...]
    width: 110px;
    height: 147px;
    background-color: blue;

    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  

Diagonales

• Saint Kitts and Nevis
• Antigua-et-Barbuda
• Guyane
• Seychelles
• Îles Marshall
• Érythrée

vexilla-mundi.com

Union Jack

• 
  St André (Écosse)
• 
  St Georges (Angleterre)
• 
  St Patrick (Irlande)
• 
  Royaume-Uni

Cantons

• Australie
• Nouvelle-Zélande
• Niue
• Îles Cook
• Tuvalu

Challenges

• Comoros
• Algeria
• Greenland
• Jamaica
• Vanuatu
• South Africa

Pas (encore) faits

• 
  British Indian Ocean Territory
• 
  Kenya
• 
  Macedonia
• 
  Mexico
• 
  Nepal
• 
  Turkmenistan