HTML + CSS guitar chords (now with barre)
This thing fascinated me - the description of guitar chords, according to the scientific - fingering. The beginning was made in the previous topic about recording chords and now has developed.
I took into account the wishes and made a new version.
Now the label of the pressed string is a point • (*) instead of © (& copy;).
In the previous version there was no support for displaying a barre - now there is a large and a small barre.
Added support for Google Chrome.
In this version, the numbers of the fingers holding the string are still displayed next to the mark. A variant using a font that allows displaying labels with a number inside may be possible, but now I can only offer this option.
Barre
It turned out to make a barre. Now you can describe chords with both large and small barre.
How it looks in HTML
Here is a piece of code, a chord with a small barre.
<div id = "Dm" class = "accord float-l">
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>0</span> </li>
<li><span>X</span> </li>
<li><span>X</span> </li>
</ul>
<div class = "grif">
<div class = "porojek verx"> </div>
<ul>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>2</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li><span>•</span><small>3</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<div class = "clearfix"> </div>
</div>
<div class = "accord-name"> Dm </div>
</div> <! - / accord Dm ->
<div id = "Am" class = "accord float-l">
<ul>
<li><span>0</span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>0</span> </li>
<li><span>X</span> </li>
</ul>
<div class = "grif">
<div class = "porojek verx"> </div>
<ul>
<li> <span> </span> </li>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>3</small> </li>
<li><span>•</span><small>2</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<div class = "clearfix"> </div>
</div>
<div class = "accord-name"> Am </div>
</div> <! - / accord Am ->
<div id = "F" class = "accord float-l">
<p> Big Barre </p>
<div class = "nomer-lada"> <ol type = "I" start = "1"> <li> </li></ol> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "grif">
<div class = "porojek verx"> </div>
<div class = "barre"> </div>
<ul>
<li><span>•</span><small>1</small> </li>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>1</small> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>2</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>4</small> </li>
<li><span>•</span><small>3</small> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<div class = "clearfix"> </div>
</div>
<div class = "accord-name"> F </div>
</div> <! - / accord F ->
<div id = "Db" class = "accord float-l w4">
<p> Small Barre </p>
<div class = "nomer-lada"> <ol type = "I" start = "1"> <li> </li></ol> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>X</span> </li>
</ul>
<div class = "grif">
<div class = "porojek verx"> </div>
<div class = "barre na3"> </div>
<ul>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li><span>•</span><small>2</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>3</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>4</small> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<div class = "clearfix"> </div>
</div>
<div class = "accord-name"> IC # or Db </div>
</div> <! - / accord Db ->
<div id = "H" class = "accord float-l">
<div class = "nomer-lada"> <ol type = "I" start = "2"> <li> </li></ol> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>X</span> </li>
</ul>
<div class = "grif">
<div class = "porojek"> </div>
<div class = "barre"> </div>
<ul>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>1</small> </li>
<li><span>•</span><small>1</small> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li><span>•</span><small>4</small> </li>
<li><span>•</span><small>3</small> </li>
<li><span>•</span><small>2</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<div class = "clearfix"> </div>
</div>
<div class = "accord-name"> H </div>
</div> <! - / accord H ->
<div id = "Hm" class = "accord float-l">
<div class = "nomer-lada"> <ol type = "I" start = "2"> <li> </li></ol> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>X</span> </li>
</ul>
<div class = "grif">
<div class = "porojek"> </div>
<div class = "barre na5"> </div>
<ul>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>1</small> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li><span>•</span><small>2</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<ul>
<li> <span> </span> </li>
<li> <span> </span> </li>
<li><span>•</span><small>4</small> </li>
<li><span>•</span><small>3</small> </li>
<li> <span> </span> </li>
<li> <span> </span> </li>
</ul>
<div class = "porojek"> </div>
<div class = "clearfix"> </div>
</div>
<div class = "accord-name"> Hm </div>
</div> <! - / accord Hm ->
<div class = "clearfix"> </div>
<dl>
<dt> Designations </dt>
<dd class = "bull"> <b> • </b> <sup> 1 </sup> <span>
- place of pressing the string and finger number </span> </dd>
<dd><small>0</small> <span> - an unpressed string sounds </span> </dd>
<dd><small>X</small> <span> - the string does not sound </span> </dd>
<dd><span><strong>I.</strong> </span>
- the fret number on which the barre is clamped </span> </dd>
<dd><span><strong>[</strong> </span>
- barre designation (clamped with 1 finger) </span> </dd>
</dl>
<p class = "float-r mar1-b"> <a href="http://r3code.habrahabr.ru/blog/53792/"> r3code.habrahabr.ru </a> </p>
</div> <! - / content ->
CSS layout
Changes have been made to support Google Chrome. Changes have also been made for IE7 (see after basic CSS).
A piece of the added code, only what is added is shown:
div.accord .grif ul li span,
div.accord .grif ul li small {
/ * code is skipped * /
height: 10px; / * for FF, Opera, Chrome * /
}
/ * File: style.css * /
/ * Accord class * /
div.accord {
width: 162px;
margin: 1em;
}
div.accord.w4 {
width: 212px;
}
div.accord .accord-name {/ * Chord name * /
text-align: center;
font-size: 1.4em;
font-weight: bold;
}
div.accord p {
text-align: center;
font-size: 1.2em;
}
div.accord .nomer-lada ol {/ * Barre fret number * /
width: 40px;
list-style-type: upper-roman;
margin: 0 0 0 22px;
padding: 0;
list-style-position: inside;
}
div.accord .nomer-lada ol li {
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
div.accord div.grif {/ * Making the bar * /
height: 7.4em;
overflow: hidden;
}
div.accord div.grif .porojek {/ * Making the sills between frets * /
height: 6.4em;
float: left;
margin: .4em 0 0 0;
border-left: 2px solid black;
}
div.accord div.grif .porojek.verx {/ * We make the first nut, it is more wide * /
border-left: 4px solid black;
}
div.accord .grif ul {/ * one field per chord * /
width: 46px;
float: left;
margin-top: -2px; / * pull the field up * /
}
div.accord .grif ul li {
text-indent: 14px; / * in the middle of the field place the label of the pressed string * /
border-bottom: 1px dotted gray; / * draw a string * /
line-height: 10px! important;
color: # 000;
}
div.accord .grif ul li span,
div.accord .grif ul li small {
display: block;
line-height: 10px! important;
font-size: 3.5em;
position: relative;
bottom: -5px; / * place the mark in the middle of the string * /
height: 10px; / * for FF, Opera, Chrome * /
}
div.accord .grif ul li small {
font-size: 1em;
float: right; / * move along the right border * /
top: -10px; / * rise to the level of the finger mark * /
left: -12px; / * place the mark in the middle of the string * /
}
div.accord .barre {/ * barre * /
border-left: 2px solid # 888;
border-top: 2px solid # 888;
border-bottom: 2px solid # 888;
float: left;
position: relative;
left: 15px;
width: 3px;
margin-left: -5px;
height: 90%;
z-index: 1;
}
div.accord .barre.na2 {
height: 30%;
}
div.accord .barre.na3 {
height: 45%;
}
div.accord .barre.na4 {
height: 60%;
}
div.accord .barre.na5 {
height: 75%;
}
div.accord ul {/ * notes before the chord about the sound of strings * /
width: 12px; / * strip width with marks * /
float: left; / * before the bar * /
line-height: 11px; / * same as for strings * /
}
div.accord ul li {
border-bottom: 1px solid transparent; / * we don’t draw strings here * /
}
I had to make a change for IE7 and select them in a separate style ie7.css, connected using conditional comments.
/ * File: ie7.css * /
div.accord .grif ul li span,
div.accord .grif ul li small {
height: auto;
}
The rest of the code can be viewed on the example page .
Variation with numbers inside labels
Another example is a digit indicating the number of a finger located inside the mark. Did according to the comment tenshi .
One of the CSS parts has been changed for it:
<blockquote>
div.accord .grif ul li small {/ * finger number * /
font-size: 1em;
float: right; / * move along the right border * /
top: -.55em; / * rise to the level of the finger mark * /
left: -23px; / * place the mark in the middle of the string * /
color: #fff;
}
If desired, the numbers can be made bold by adding to
<blockquote>
div.accord .grif ul li small {
...
font-weight: bold;
}
But here there is one stone - when printing numbers inside labels in different browsers are displayed differently. FF - apparently makes all the text black, an incomprehensible conversion occurs in IE and the numbers are visible in some gray color, Opera - it displays just white and they are visible normally.
I don’t know how to solve this problem yet.
Tested in IE7, FF3, Opera 9, Chrome
I think now to make a simple web service for publishing chords, as maxmyd advised.
UPD 03/23/2009: Support for Google Chrome is made
