Compagnonnage, CSS et Vexillologie

Tim Carry

@pixelastic

Compagnonnage

Chef d'œuvre

Découverte
Apprentissage
Maitrise
Perfection

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

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

Pythagore
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@

pixelastic

.com

170/251 (67%)

British Indian
Mexico
Cambodge
Kenya
Grenade
Turkmenistan