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

Compagnonnage,
CSS &
Vexillologie

Tim Carry

@pixelastic
Algolia
HumanTalks
TechLunch

Compagnonnage

Compagnons

Ancienne illustration de Compagnons au travail
  • Artisans
  • Guildes
  • Haute qualité
  • Disciples / Maîtres
  • Règles

Chef-d'œuvre

Pictures of masterpieces from the Musée du Compagnonnage in Tours
  1. apprentissage
  2. découverte
  3. perfectionnement
  4. maîtrise

CSS

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

Vexillologie

Étude des drapeaux

  • Nouveau monde
  • Vocabulaire
  • Couleurs
  • Histoire
Capture décran de "The Big Bang Theory", avec Sheldon Cooper présentant "Fun with Flags"

Tricolores

France
Italie
Pérou
Belgique
Nigeria

France

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

Variations

Irlande
Côte d'Ivoire
Roumanie
Guinée
Mali
Tchad

Tribandes / Bibandes

Hongrie
Pays-Bas
Colombie
Ukraine
Indonésie
Monaco

Vrais drapeaux

Algérie
États-Unis
Nouvelle Zélande
Corée du Sud
Macédoine
Bosnie-Herzégovine

Plus de bandes

Île Maurice
Botswana
Gambie
Thaïlande
Costa Rica
linear-gradient
background-image:
 linear-gradient(90deg, blue, purple);
)
linear-gradient
background-image:
 linear-gradient(90deg, 
                 blue 0%, purple 50%,
                 orange 50%, yellow 100%); 
)
linear-gradient
background-image:
 linear-gradient(90deg, 
                 blue 0%, blue 50%,
                 orange 50%, orange 100%);
)

Île Maurice

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

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

Étoiles

Viêt Nam
Birmanie
Cameroun
Liberia
Corée du Nord
Ghana

Viêt Nam

&:before {
 // BLACK STAR (U+2605)
 content: "★";
 color: yellow;
 position: absolute;
 top: 30px;
 left: 66px;
 font-size: 88px;
 line-height: 88px;
}
Viêt Nam

Symboles

Maroc
Israël
Canada
Liban
Albanie
Angola

Police spéciale

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

U+E000 – U+F8FF

Plusieurs symboles

Honduras
Venezuela
Cap Vert
Micronésie
Georgie
Martinique
text-shadow
MiXiT
text-shadow: 0.1rem 0.1rem 0.5rem black;
text-shadow
MiXiT
text-shadow: 
   5rem  -3rem 0.2rem red,
  -8rem  -2rem 0.8rem white,
   9rem   2rem 0.8rem yellow
text-shadow
MiXiT
text-shadow: 
   5rem  -3rem 0px white,
  -8rem  -2rem 0px white,
   9rem   2rem 0px white

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;
}
Honduras

Croissants

Mauritanie
Libye
Malaysie
Singapour
Tunisie
Turquie
Éclipse
Éclipse
background-image:
   radial-gradient(circle at 60% 50%, 
                   blue 2rem, transparent 2rem),
   radial-gradient(circle at 40% 50%, 
                   red 2rem, transparent 2rem);

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
 );
Mauritania

Triangles

République Tchèque
Djibouti
Philippines
Comorres
Puerto Rico
Bahrain
clip-path
clip-path
clip-path: polygon(
   50% 0%, 
   100% 38%, 
   82% 100%, 
   18% 100%, 
   0% 38%
);

République Tchèque

&:before {
 display: block;
 width: 110px;
 height: 147px;
 background-color: blue;
 clip-path: polygon(0 0, 
   100% 50%, 
   0 100%
 );
}
République Tchèque

Népal

Diagonales

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

vexilla-mundi.com

Feuille de construction du drapeau de la Tanzanie

Trigonométrie

Pythagore
Feuille de construction du drapeau de la Tanzanie
SOHCAHTOA

SCSS

# Shell
scss -r ./geometry_helper.rb input.scss 
# Ruby
module GeometryHelper
 def cos(number)
   Sass::Script::Number.new(Math.cos(
      number.value * Math::PI / 180
   ))
 end
end
// SCSS
$red-stripe-size: cos($alpha) * $height;

Royaume-Uni

Union Jack

Flag of Écosse
Écosse
Flag of Irlande
Irlande
Flag of Angleterre
Angleterre
Flag of Royaume-Uni
Royaume-Uni

Commonwealth

Australie
Nouvelle Zélande
Niue
Îles Cook
Tuvalu

// TODO

Flag of Mexico
Mexico
Flag of Turkmenistan
Turkmenistan
Flag of British Indian
British Indian
Flag of Grenada
Grenada
Flag of Cambodia
Cambodia
Flag of Kenya
Kenya
box-shadow
box-shadow: 
  -10rem  1rem  0px  white,
   11rem  2rem  0px  purple,
    6rem -1rem  0px  yellow;
box-shadow
box-shadow: 
  8rem   4rem  0px  white,
  11rem  4rem  0px  purple,
  11rem  1rem  0px  yellow;
img2css 
display: block;
width: 1px;
height: 1px;
box-shadow: 106px 2px 0px #864320,
            107px 2px 0px #8F4620,
            108px 2px 0px #8F4620,
            109px 2px 0px #8F4620,
            110px 2px 0px #8F4620,
            111px 2px 0px #8F4620,
            112px 2px 0px #8F4620,
            104px 3px 0px #8D4520,
            105px 3px 0px #8F4620,
            [...] x 20k
~500Kb
L'important n'est pas la destination,
mais le voyage.

CSS API Client

www.algolia.com/css

Questions ?

Algolia