![Большое и малое баррэ (CSS,HTML only)](http://s53.radikal.ru/i139/0903/6f/5de57305079d.jpg)
Увлекло меня это дело — описание гитарных аккордов, по научному — аппликатура. Начало было положено в предыдущим топике про запись аккордов и теперь получило своё развитие.
Я учел пожелания и сделал новую версию.
Теперь метка прижимаемой струны — это точка • (& bull;) вместо © (& copy;).
В прошлой версии не было поддержки отображения баррэ — теперь есть и большое, и малое баррэ.
Добавлена поддержка Google Chrome.
В данной версии номера пальцев прижимающих струну по-прежнему отображаются рядом с меткой. Вариант с использованием шрифта позволяющего отображать метки с цифрой внутри возможно будет, но сейчас могу предложить только такой вариант.
Баррэ
Получилось сделать баррэ. Теперь можно описывать аккорды как с большим, так и малым баррэ.
Как это выглядит в Html
Привожу часть кода, аккорд с малым баррэ.
<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>Большое баррэ</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>Малое баррэ</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">I-C# или 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>Обозначения</dt> <dd class="bull"><b>•</b><sup>1</sup><span> — место прижатия струны и номер пальца</span></dd> <dd><small>0</small><span> — звучит неприжатая струна</span></dd> <dd><small>X</small><span> — струна не звучит</span></dd> <dd><span><strong>I.</strong></span> — номер лада на котором зажимается баррэ</span></dd> <dd><span><strong>[</strong></span> — обозначение баррэ (зажимается 1 пальцем)</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 оформление
Для поддержки Google Chrome внесены изменения. Для IE7 тоже внесены изменения (см. после основного CSS).
Кусочек добавленного кода, показано только то что добавлено:
div.accord .grif ul li span, div.accord .grif ul li small { /* код пропущен */ height: 10px; /* для FF, Opera, Chrome */ }
/* File: style.css */ /* Accord class */ div.accord { width: 162px; margin: 1em; } div.accord.w4 { width: 212px; } div.accord .accord-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 { /* Номер лада для баррэ */ 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 { /* Оформляем гриф */ height: 7.4em; overflow: hidden; } div.accord div.grif .porojek { /* Оформляем порожек между ладами */ height: 6.4em; float: left; margin: .4em 0 0 0; border-left: 2px solid black; } div.accord div.grif .porojek.verx { /* Оформляем первый порожек, он больше в ширину */ border-left: 4px solid black; } div.accord .grif ul { /* одно поле под аккорд */ width: 46px; float: left; margin-top: -2px; /* поле подтягиваем вверх */ } div.accord .grif ul li { text-indent: 14px; /* посередине поля расположим метку прижимаемой струны */ border-bottom: 1px dotted gray; /* рисуем струну */ 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; /* расположим метку посередине струны */ height: 10px; /* для FF, Opera, Chrome */ } div.accord .grif ul li small { font-size: 1em; float: right; /* сдвинем по правой границе */ top: -10px; /* подъем до уровня отметки пальца */ left: -12px; /* расположим метку посередине струны */ } div.accord .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 { /* отметки перед аккордом о звучании струн */ width: 12px; /* ширина полоски с метками */ float: left; /* перед грифом */ line-height: 11px; /* такая же как для струн */ } div.accord ul li { border-bottom: 1px solid transparent; /* тут струны не рисуем */ }
Пришлось для IE7 сделать изменение и выделить их в отдельный стиль ie7.css, подключаемый с помощью условных коментариев.
/* File: ie7.css */ div.accord .grif ul li span, div.accord .grif ul li small { height: auto; }
Остальной код можно посмотреть на странице с примером.
Вариация с цифрами внутри меток
![Аккорд, вариант с номерами пальцев внутри меток](https://habrastorage.org/getpro/habr/post_images/af2/349/ff0/af2349ff02ed6c3c9f886311b2ceee2b.jpg)
Еще один пример — цифра обозначающая номер пальца находиться внутри метки. Сделал по комментарию tenshi.
Для него изменена одна из частей CSS:
<blockquote> div.accord .grif ul li small {/* номер пальца */ font-size: 1em; float: right; /* сдвинем по правой границе */ top: -.55em; /* подъем до уровня отметки пальца */ left: -23px; /* расположим метку посередине струны */ color: #fff; }
При желании номера цифр можно сделать жирными, добавив в
<blockquote> div.accord .grif ul li small { ... font-weight: bold; }
Но тут кроется один камень — при печати цифры внутри меток в разных браузерах отображаются по разному. FF — видимо делает весь текст черным, в IE происходит непонятное преобразование и цифры видны каким-то серым цветом, Opera — отображает как раз белым и их видно нормально.
Как решить эту проблему пока не знаю.
Протестировано в IE7, FF3, Opera 9, Chrome
Думаю теперь сделать простенький веб-сервис для публикации аккордов, как maxmyd посоветовал.
UPD от 23.03.2009: Сделана поддржка Google Chrome
![Сделана поддржка Google Chrome](http://s41.radikal.ru/i092/0903/8e/4f44c86d88ca.jpg)