Stars and Stylesheets

The US Flag in CSS

by klenwell

HTML

<div id="container">
  <div id="flag">
    <div id="fieldofblue">
      <div class="inner">
        <div class="row">
          <div class="star" title="Delaware"><span>&#10029;</span></div>
          <div class="star" title="Pennsylvania"><span>&#10029;</span></div>
          <div class="star" title="New Jersey"><span>&#10029;</span></div>
          <div class="star" title="Georgia"><span>&#10029;</span></div>
          <div class="star" title="Connecticut"><span>&#10029;</span></div>
          <div class="star" title="Massachusetts"><span>&#10029;</span></div>
        </div>
        <div class="row">
          <div class="star" title="Maryland"><span>&#10029;</span></div>
          <div class="star" title="South Carolina"><span>&#10029;</span></div>
          <div class="star" title="New Hampshire"><span>&#10029;</span></div>
          <div class="star" title="Virginia"><span>&#10029;</span></div>
          <div class="star" title="New York"><span>&#10029;</span></div>
        </div>
        <div class="row">
          <div class="star" title="North Carolina"><span>&#10029;</span></div>
          <div class="star" title="Rhode Island"><span>&#10029;</span></div>
          <div class="star" title="Vermont"><span>&#10029;</span></div>
          <div class="star" title="Kentucky"><span>&#10029;</span></div>
          <div class="star" title="Tennessee"><span>&#10029;</span></div>
          <div class="star" title="Ohio"><span>&#10029;</span></div>
        </div>
        <div class="row">
          <div class="star" title="Louisiana"><span>&#10029;</span></div>
          <div class="star" title="Indiana"><span>&#10029;</span></div>
          <div class="star" title="Mississippi"><span>&#10029;</span></div>
          <div class="star" title="Illinois"><span>&#10029;</span></div>
          <div class="star" title="Alabama"><span>&#10029;</span></div>
        </div>
        <div class="row">
          <div class="star" title="Maine"><span>&#10029;</span></div>
       ...

CSS

* {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  color: white;
  font-family: Helvetica, sans-serif;
  padding: 12px;
}

#container {
  font: 250px Helvetica, sans-serif;
  margin: 0px auto;
  padding: 0px;
  position: relative;
  background-color: black;
  max-width: 100%;
}

#flag {
  background-color: #000;
  height: 1em;
  position: relative;
  width: 100%;
  max-width: 500px;
}

#fieldofblue {
  background-color: #3C3B6E;
  height: 0.54em;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.76em;
}

.inner {
  height: 0.6em;
  overflow: hidden;
  position: relative;
  top: 0.014em;
  left: 0.034em;
  width: 0.8em;
}

.star {
  float: left;
  height: 0.062em;
  margin: 0 0.0650em -0.009em 0;
  width: 0.064em;
  cursor: pointer;
}

.star span {
  color: #AAAAAA;
  display: block;
  font-size: 0.0667em;
}

div.row {
  clear: left;
  position: relative;
  left: 0.065em;
}

div.row:first-child {
  top: 0;
  left: 0;
}

div.row:nth-child(odd) {
  left: 0;
}

#thirteen-colonies div.stripe {
  background-color: #fff;
  height: 0.0769em;
}

#thirteen-colonies div.stripe:nth-child(odd) {
  background-color: #B22234;
}

#thirteen-colonies div.stripe:nth-child(8) {
  position: relative;
  z-index: 99;
}

h5.source {
  font-weight: normal;
  margin-top: 8px;
}

JavaScript

var $stars = $('div.star span');
var $yellowStar = $('div.star[title="Delaware"] span');
var $source = $('h5.source');

var changeColor = function(e) {
  $source.text('TODO: update changeColor method.');
};

$yellowStar.css('color', 'yellow');
$stars.on('click', changeColor);