Как обычно представляют гитарные аккорды на веб-страничках? Картинками!
Вот только не всегда это удобно, потому что их приходиться рисовать.
Вот у меня родилась идея:
отображать гитарные аккорды используя только HTML и CSS.
Описываю аккорд так:
Название, столбец данных данных о звучании струны, поле для аккорда.
Меткой указывается зажимаемая струна и прижимающий её палец. Значения остальных меток приведены на рисунке.
Пока я сделал отображение только простых аккордов, аккорды с барре пора не отображаются.
Если кто-то придумает — милости просим с предложениями.
Собственно само представление грифа гитары сделано на списках. 4 списка: 1 — для отметок о звучании, 2..4 — для ладов.
Как это выглядит в Html
<div class="accord float-l"> <div class="accord-name">Dm</div> <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>©<small>1</small></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></li> <li><span>©<small>2</small></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>©<small>3</small></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><!-- /accord Dm -->
Пустые строки необходимо заполнять неразрывным пробелом, который не отображается, чтобы нормальные браузеры (FF например) отображали эти строки.
Оформляем Html с помощью CSS
/* Accord */
div.accord {
width: 162px;
margin: 1em;
}
div.accord .accord-name { /* Название аккорда */
text-align: center;
font-size: 1.4em;
font-weight: bold;
}
div.accord div.grif { /* Оформляем гриф */
height: 7.4em;
overflow: hidden;
}
div.accord div.grif .porojek { /* Оформляем порожек между ладами */
width: 2px;
height: 6.4em;
float: left;
background: black;
margin: .4em 0 0 0;
}
div.accord div.grif .porojek.verx { /* Оформляем первый порожек, он больше в ширину */
width: 4px;
}
div.accord .grif ul { /* одно поле под аккорд */
width: 46px;
float: left;
margin-top: -.6em; /* поле подтягивем вверх */
line-height: 11px;
}
div.accord .grif ul li {
text-align: center; /* посередине поля расположим метку прижимаемой струны */
border-bottom: 1px dotted gray; /* рисуем струну */
}
div.accord .grif ul li span {
position: relative;
bottom: -.6em; /* расположим метку посередине струны */
font-size: 1em;
font: Verdana;
}
div.accord .grif ul li span small { /* номер прижимающего струну пальца */
font-size: .9em;
position: relative;
bottom: 2px; /* сдвинем относительно метки чуть вверх и вправо */
left: 1px;
}
div.accord ul { /* отметки перед аккордом о звучании струн */
width: 12px;
float: left;
line-height: 12px;
}
#content dl { /* список обозначений */
font-size: 1.2em;
}
#content dl dt {
font-weight: bold;
}
Для сбрасывания стилей браузеров по умолчанию используется reset.css из Yahoo! UI Library.
Посмотреть живое демо
UPD: протестировано только IE7, FF3, Opera 9
UPD 21.03.2009: О версии с поддержкой баррэ читайте в следующем топике.
