Craftsmanship, CSS & Vexillology

Tim Carry

@pixelastic

Craftsmanship

Companions

Craftsman
Guilds
High quality
Disciples / Masters
Rules

Masterpiece

Journey
from learning, to discovering, to perfecting, to mastering.

CSS

Challenge

Build all the flags of the world in CSS

...with only one <div> per flag.

Vexillology

Study of flags

New world
Specific vocabulary
History
Needed

Screenshot from The Big Bang Theory with Sheldon Cooper presenting "Fun with Flags"

Tricolores

France

Italy

Peru

Belgium

Nigeria

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

France

Variations

Ireland

Ivory Coast

Romania

Guinea

Mali

Chad

Tribandes / bibandes

Hongria

Netherlands

Colombia

Ukraine

Indonesia

Monaco

Real flags

Algeria

U.S.A

New Zealand

South Korea

Macedonia

Bosnia

More stripes

Mauritius

Botswana

Gambia

Thailand

Costa Rica

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

Mauritius

Layering

Benin

Madagascar

United Arab Emirates

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

Nordic crosses

Sweden

Finland

Denmark

Norway

Iceland

Diagonal stripes

Tanzania

Congo

Guyana

Seychelles

Trinidad and Tobago

vexilla-mundi.com

# 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;

Circles

Japan

Niger

Laos

Bangladesh

Palaos

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

Japan

Stars

Vietnam

Myanmar

Cameroon

Liberia

North Korea

Ghana

background: red;

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

Vietnam

Symbols

Morocco

Israel

Canada

Lebanon

Albania

Angola

Custom font

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



































































































Several symbols

Honduras

Venezuela

Cape Verde

Micronesia

Georgia

Martinique

background-image:
 linear-gradient(180deg, 
   blue 0%,       blue 33.33%, 
   white 33.33%,  white 66.66%, 
   blue 66.66%,   blue 100%
 )

&: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

Crescents

Mauritania

Libya

Malaysia

Singapore

Tunisia

Turkey

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

Czech Republic

Djibouti

Philippines

Comorros

Puerto Rico

Bahrain

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%
 );
}

Czech Republic

United Kingdom

Union Jack

Scotland

Ireland

England

United Kingdom

Commonwealth

Australia

New Zealand

Niue

Cook Islands

Tuvalu

// TODO

Turkmenistan

British Indian

Mexico

Grenada

Cambodia

Kenya

display: block;
width: 1px;
height: 1px;
background: transparent;
box-shadow: 0px 0px 0px #F99E0C,
            1px 0px 0px #F99E0C,
            2px 0px 0px #F99E0C,
            3px 0px 0px #F99E0C,
            4px 0px 0px #F99E0C,
            5px 0px 0px #F99E0C,
            6px 0px 0px #F99E0C,
            7px 0px 0px #F99E0C,
            8px 0px 0px #F99E0C,
           [...]

Turkmenistan

https://github.com/pixelastic/img2css

What is important is the journey,
not the destination.

Questions?

tim@

pixelastic

.com