Спустя несколько месяцев с публикации второй версии своих гитарных табулатур, нашел наконец-то время немного их доработать напильником.
Что было сделано:
— Убрал схемы с двойными струнами (они делались, в общем-то скорее по фану),
— Максимальное количество ладов ограничил двенадцатью,
— Добавил отображение номеров ладов,
— Добавил отображение номеров пальцев,
— Добавил отображение строя инструмента,
— Переделал отображение неактивных струн (раньше они выделялись красными «фишками», теперь, как и положено, красными крестиками и менее заметным цветом (второе сделано для шестого ИЕ, который не поддерживат css-свойство content),
— Поработал над кроссбраузерностью, в результате — та-дааам! — эта штука работает даже в старичке шестом ИЕ, хотя некоторых красивостей там увидеть и не получится.
Как это безобразие выглядит, можно увидеть на странице с примерами (сравнить с предыдущей версией).
Как всем этим пользоваться?
Сейчас я включу фантазию и представлю на секундочку, что все вышеописанное кому-нибудь понадобилось, и постараюсь наглядно показать, как этим пользоваться.
Пошаговая инструкция по отображению аккорда Em
1. Скачиваете css-файл блока и кладете его в удобную для вас директорию.
2. Подключаете скачанный цсс-файл:
3. Создаете обертку:
Если вам не нужен полный гриф в двенадцать ладов, можно сделать так:
В этом случае в обертку можно будет запихнуть пять ладов. Класс SingleVI означает что у отображаемого инструмента шесть одинарных струн. Еще можно использовать классы: SingleIII, SingleIV, SingleV и SingleVII. Если вы хотите использовать басовые схемы, то нужно поставить сюда любой из этих классов: BassIII, BassIV, BassV, BassVI.
4. Вставка ладов:
Если вы использовали для обертки класс b-neck_type_part, то элементов с классом b-neck__fret должно быть не больше шести. Класс Nut у такого элемента означает, что это — верхний порожек. Классы-римские цифры — это номера ладов. Начинать отсчет можно как с Nut, так и с любого лада (в этом случае Nut просто убирается).
5. Вставка струн:
Если вы использовали класс, отличный от SingleVI, то струн должно быть столько, сколько указано в этом классе.
С блоком b-neck__string все просто. У него могут быть три класса.
Первый — римская цифра, означающая номер струны (он обязательный).
Второй — латинская буква в верхнем регистре, обозначающая, на какую ноту струна сейчас настроена (его можно не указывать). Помимо чистых нот можно указывать диезовые или бемолевые. Например вот так:
или:
Пользоваться этой возможностью следует осторожно, потому что значки ♯ и ♭ не во всех операционках и шрифтах отображаются.
Третий класс тоже не обязателен, он может быть либо Active, либо Inactive. В первом случае струна подсвечивается зеленым, как активная, во втором, у нее появляется красный крестик и она «бледнеет».
6. Вставка «пальцев» (этот блок самый сложный)
Следует обратить внимание на блок b-neck__finger. У него может быть четыре класса.
Первый — римская цифра от I до V. Она обозначает номер пальца. Если этот класс не указать, то номер пальца показываться не будет. Пальцы указываются следующим образом: указательный — I, средний — II, безымянный — III, мизинец — IV, большой (иногда он встречается) — V.
Второй — At+римская цифра, обозначающая, на какую струну ставится «палец».
Третий — To+римская цифра, обозначающая, на какой лад «палец» сдвигается.
Четвертый — Barre+римская цифра, обозначающая, на сколько ладов ставится баррэ. Например:
Поставит баррэ на 4 струны.
7. Возможно, вам захочется добавить подпись или заголовок к блоку с аккордом
Вот, в общем-то и все.
Немного баловства:
Арпеджио №1,
Арпеджио №2,
Арпеджио №3,
Арпеджио №4 (мое любимое).
Альтернативные версии:
habrahabr.ru/blogs/css/55248 от r3code,
rukeba.com/chords от rukeba,
habrahabr.ru/blogs/css/94139 от tenshi,
chordfind.com,
www.gootar.com/guitar.
Что было сделано:
— Убрал схемы с двойными струнами (они делались, в общем-то скорее по фану),
— Максимальное количество ладов ограничил двенадцатью,
— Добавил отображение номеров ладов,
— Добавил отображение номеров пальцев,
— Добавил отображение строя инструмента,
— Переделал отображение неактивных струн (раньше они выделялись красными «фишками», теперь, как и положено, красными крестиками и менее заметным цветом (второе сделано для шестого ИЕ, который не поддерживат css-свойство content),
— Поработал над кроссбраузерностью, в результате — та-дааам! — эта штука работает даже в старичке шестом ИЕ, хотя некоторых красивостей там увидеть и не получится.
Как это безобразие выглядит, можно увидеть на странице с примерами (сравнить с предыдущей версией).
Как всем этим пользоваться?
Сейчас я включу фантазию и представлю на секундочку, что все вышеописанное кому-нибудь понадобилось, и постараюсь наглядно показать, как этим пользоваться.
Пошаговая инструкция по отображению аккорда Em
1. Скачиваете css-файл блока и кладете его в удобную для вас директорию.
2. Подключаете скачанный цсс-файл:
<link rel="stylesheet" type="text/css" href="путь_к_файлу/b-neck.css">
3. Создаете обертку:
<div class="b-neck">
<div class="b-neck__fretboard SingleVI">
</div>
</div>
Если вам не нужен полный гриф в двенадцать ладов, можно сделать так:
<div class="b-neck b-neck_type_part">
<div class="b-neck__fretboard SingleVI">
</div>
</div>
В этом случае в обертку можно будет запихнуть пять ладов. Класс SingleVI означает что у отображаемого инструмента шесть одинарных струн. Еще можно использовать классы: SingleIII, SingleIV, SingleV и SingleVII. Если вы хотите использовать басовые схемы, то нужно поставить сюда любой из этих классов: BassIII, BassIV, BassV, BassVI.
4. Вставка ладов:
<div class="b-neck">
<div class="b-neck__fretboard SingleVI">
<div class="b-neck__frets">
<div class="b-neck__fret Nut"></div>
<div class="b-neck__fret I"></div>
<div class="b-neck__fret II"></div>
<div class="b-neck__fret III"></div>
<div class="b-neck__fret IV"></div>
<div class="b-neck__fret V"></div>
<div class="b-neck__fret VI"></div>
<div class="b-neck__fret VII"></div>
<div class="b-neck__fret VIII"></div>
<div class="b-neck__fret IX"></div>
<div class="b-neck__fret X"></div>
<div class="b-neck__fret XI"></div>
<div class="b-neck__fret XII"></div>
</div>
</div>
</div>
Если вы использовали для обертки класс b-neck_type_part, то элементов с классом b-neck__fret должно быть не больше шести. Класс Nut у такого элемента означает, что это — верхний порожек. Классы-римские цифры — это номера ладов. Начинать отсчет можно как с Nut, так и с любого лада (в этом случае Nut просто убирается).
5. Вставка струн:
<div class="b-neck">
<div class="b-neck__fretboard SingleVI">
<div class="b-neck__frets">
<div class="b-neck__fret Nut"></div>
<div class="b-neck__fret I"></div>
<div class="b-neck__fret II"></div>
<div class="b-neck__fret III"></div>
<div class="b-neck__fret IV"></div>
<div class="b-neck__fret V"></div>
<div class="b-neck__fret VI"></div>
<div class="b-neck__fret VII"></div>
<div class="b-neck__fret VIII"></div>
<div class="b-neck__fret IX"></div>
<div class="b-neck__fret X"></div>
<div class="b-neck__fret XI"></div>
<div class="b-neck__fret XII"></div>
</div>
<div class="b-neck__strings">
<div class="b-neck__string I E"></div>
<div class="b-neck__string II H"></div>
<div class="b-neck__string III G"></div>
<div class="b-neck__string IV D"></div>
<div class="b-neck__string V A"></div>
<div class="b-neck__string VI E"></div>
</div>
</div>
</div>
Если вы использовали класс, отличный от SingleVI, то струн должно быть столько, сколько указано в этом классе.
С блоком b-neck__string все просто. У него могут быть три класса.
Первый — римская цифра, означающая номер струны (он обязательный).
Второй — латинская буква в верхнем регистре, обозначающая, на какую ноту струна сейчас настроена (его можно не указывать). Помимо чистых нот можно указывать диезовые или бемолевые. Например вот так:
<div class="b-neck__string I F♯"></div>
или:
<div class="b-neck__string I E♭"></div>
Пользоваться этой возможностью следует осторожно, потому что значки ♯ и ♭ не во всех операционках и шрифтах отображаются.
Третий класс тоже не обязателен, он может быть либо Active, либо Inactive. В первом случае струна подсвечивается зеленым, как активная, во втором, у нее появляется красный крестик и она «бледнеет».
6. Вставка «пальцев» (этот блок самый сложный)
<div class="b-neck">
<div class="b-neck__fretboard SingleVI">
<div class="b-neck__frets">
<div class="b-neck__fret Nut"></div>
<div class="b-neck__fret I"></div>
<div class="b-neck__fret II"></div>
<div class="b-neck__fret III"></div>
<div class="b-neck__fret IV"></div>
<div class="b-neck__fret V"></div>
<div class="b-neck__fret VI"></div>
<div class="b-neck__fret VII"></div>
<div class="b-neck__fret VIII"></div>
<div class="b-neck__fret IX"></div>
<div class="b-neck__fret X"></div>
<div class="b-neck__fret XI"></div>
<div class="b-neck__fret XII"></div>
</div>
<div class="b-neck__strings">
<div class="b-neck__string I E"></div>
<div class="b-neck__string II H"></div>
<div class="b-neck__string III G"></div>
<div class="b-neck__string IV D"></div>
<div class="b-neck__string V A"></div>
<div class="b-neck__string VI E"></div>
</div>
<div class="b-neck__hand">
<div class="b-neck__finger III AtIV ToII"></div>
<div class="b-neck__finger II AtV ToII"></div>
</div>
</div>
</div>
Следует обратить внимание на блок b-neck__finger. У него может быть четыре класса.
Первый — римская цифра от I до V. Она обозначает номер пальца. Если этот класс не указать, то номер пальца показываться не будет. Пальцы указываются следующим образом: указательный — I, средний — II, безымянный — III, мизинец — IV, большой (иногда он встречается) — V.
Второй — At+римская цифра, обозначающая, на какую струну ставится «палец».
Третий — To+римская цифра, обозначающая, на какой лад «палец» сдвигается.
Четвертый — Barre+римская цифра, обозначающая, на сколько ладов ставится баррэ. Например:
<div class="b-neck__finger BarreIV"></div>
Поставит баррэ на 4 струны.
7. Возможно, вам захочется добавить подпись или заголовок к блоку с аккордом
<div class="b-neck">
<div class="b-neck__h1">Заголовок сверху</div>
<div class="b-neck__fretboard SingleVI">
<div class="b-neck__frets">
<div class="b-neck__fret Nut"></div>
<div class="b-neck__fret I"></div>
<div class="b-neck__fret II"></div>
<div class="b-neck__fret III"></div>
<div class="b-neck__fret IV"></div>
<div class="b-neck__fret V"></div>
<div class="b-neck__fret VI"></div>
<div class="b-neck__fret VII"></div>
<div class="b-neck__fret VIII"></div>
<div class="b-neck__fret IX"></div>
<div class="b-neck__fret X"></div>
<div class="b-neck__fret XI"></div>
<div class="b-neck__fret XII"></div>
</div>
<div class="b-neck__strings">
<div class="b-neck__string I E"></div>
<div class="b-neck__string II H"></div>
<div class="b-neck__string III G"></div>
<div class="b-neck__string IV D"></div>
<div class="b-neck__string V A"></div>
<div class="b-neck__string VI E"></div>
</div>
<div class="b-neck__hand">
<div class="b-neck__finger III AtIV ToII"></div>
<div class="b-neck__finger II AtV ToII"></div>
</div>
</div>
<div class="b-neck__h2">Заголовок снизу</div>
<div class="b-neck__message">Сопроводительный текст</div>
</div>
Вот, в общем-то и все.
Немного баловства:
Арпеджио №1,
Арпеджио №2,
Арпеджио №3,
Арпеджио №4 (мое любимое).
Альтернативные версии:
habrahabr.ru/blogs/css/55248 от r3code,
rukeba.com/chords от rukeba,
habrahabr.ru/blogs/css/94139 от tenshi,
chordfind.com,
www.gootar.com/guitar.