Как обычно представляют гитарные аккорды на веб-страничках?
Картинками!
Вот только не всегда это удобно, потому что их приходиться рисовать.
Вот у меня родилась идея:
отображать гитарные аккорды используя только HTML и CSS.
Описываю аккорд так:
Название, столбец данных данных о звучании струны, поле для аккорда.
Меткой указывается зажимаемая струна и прижимающий её палец. Значения остальных меток приведены на рисунке.
Пока я сделал отображение только простых аккордов, аккорды с барре пора не отображаются.
Если кто-то придумает — милости просим с предложениями.
Собственно само представление грифа гитары сделано на списках. 4 списка: 1 — для отметок о звучании, 2..4 — для ладов.
Пустые строки необходимо заполнять неразрывным пробелом, который не отображается, чтобы нормальные браузеры (FF например) отображали эти строки.
Для сбрасывания стилей браузеров по умолчанию используется reset.css из Yahoo! UI Library.
Посмотреть живое демо
UPD: протестировано только IE7, FF3, Opera 9
UPD 21.03.2009: О версии с поддержкой баррэ читайте в следующем топике.
Картинками!
Вот только не всегда это удобно, потому что их приходиться рисовать.
Вот у меня родилась идея:
отображать гитарные аккорды используя только 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: О версии с поддержкой баррэ читайте в следующем топике.