Guitar Chords in CSS

guitar-chords-in-css.markdown

A Pen by Taylor MacDonald on CodePen.

License.

index.html

<table class="chord">
<thead>
<tr>
  <th class="cj" colspan="7"><strong>Gmaj</strong></th>
</tr>
<tr>
  <td>&nbsp;</td>
  <td></td>
  <td></td>
  <td><i class="open"></i></td>
  <td><i class="open"></i></td>
  <td></td>
  <td></td>
</tr>
</thead>
<tbody>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td><i class="dot"></i></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>3</td>
  <td><i class="dot"></i></td>
  <td></td>
  <td></td>
  <td></td>
  <td><i class="dot"></i></td>
  <td><i class="dot"></i></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr> 
</tbody>
</table>


<table class="chord">
<thead>
<tr>
  <th class="cj" colspan="7"><strong>Am</strong></th>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><i class="muted"></i></td>
  <td><i class="open"></i></td>
  <td></td>
  <td></td>
  <td></td>
  <td><i class="open"></i></td>
</tr>
</thead>
<tbody>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><i class="dot"></i></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td><i class="dot"></i></td>
  <td><i class="dot"></i></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr> 
</tbody>
</table>



<table class="chord">
<thead>
<tr>
  <th class="cj" colspan="7"><strong>Fmaj</strong></th>
</tr>
<tr>
  <td>&nbsp;</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
</thead>
<tbody>
<tr>
  <td></td>
  <td><i class="dot"></i></td>
  <td class="span"></td>
  <td class="span"></td>
  <td class="span"></td>
  <td class="span"></td>
  <td><i class="dot"></i></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><i class="dot"></i></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td><i class="dot"></i></td>
  <td><i class="dot"></i></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr> 
</tbody>
</table>

style.scss

@import "compass";
body {
  padding: 30px;
}

.chord {
  float: left;
  font-family: sans-serif;
  &, td, th {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    padding: 0;
  }
  & {
    margin-bottom: 20px;
  }
  th, td {
    border-bottom: 1px solid;
    &:last-child {
      border-bottom: none;
    }
  }
  thead {
    th {
      font-size: 20px;
    }
    td {
      padding-top: 10px;
    }
  }
  tbody {
    td {
      border-left: 1px solid;
      width: 20px;
      height: 20px;
    }
  }
  thead,
  tbody {
    *:first-child {
      border: none;
      width: 25px;
    }
  }
  .cj {
    text-align: center;
  }
  i {
    font-style: normal;
    margin-left: -40%;
    &.open {
      &:before {
        content: "\039f";
      }
    }
    &.muted {
      &:before {
        content: "\03a7";
      }
    }
    &.dot {
      @include border-radius(28px);
      background: #000;
      display: block;    
      width: 14px;
      height: 14px;
    }
  }
}