Pull to refresh

Продолжение идеи записи гитарных аккордов в HTML. Версия 3, оптимизированные варианты

Reading time9 min
Views1.2K

Продолжаем разработку записи аккордов в HTML. В камментах предыдущего топика selenit предложил оптимизированный вариант(1,2), где кода еще меньше.

Для ознакомления с темой подробно, почитайте предыдущий топик.


Код переработали, теперь вместо 4 списков используется 1 на котором, как на струнах все держиться.
Метка & bull; щаменена на более крупный сипвол из unicode & #9679;

При реализации предложеной selenit удалось уменьшить число кода, однако пришлось понести потери. В частности некоректная печать в Opera, IE — акорды разлезаются. Как решить пока не придумал.
При масштабировании страницы в IE смещаются цифры, обозначающие номера пальцев.
Вариант с корректной печатью можно увидеть в предыдущией версии кода.

Применительно ко всем версиям: вид аккорда зависит от размеров шрифтов, т.к. для метки используется шрифтовой символ, то и с измнением шрифта или его размера необходимо поменять параметры в CSS для корректного отображения.

Код HTML и CSS для оформления аккорда.



HTML для нескольких аккордов, демонстрация большого и малого баррэ.
<h1>Гитарные аккорды v3</h1>
<div class="accord float-l">
  <div class="porog2">
    <div class="porog3">
      <ol class="lad0">
        <li><span class="lad1"><big></big><small>1</small></span></li>
        <li><span class="lad3"><big></big><small>3</small></span></li>
        <li><span class="lad2"><big></big><small>2</small></span></li>
        <li><span>0</span></li>
        <li><span>x</span></li>
        <li><span>x</span></li>
      </ol>
    </div>
  </div>
  <h2>Dm</h2>
</div>

<div class="accord float-l">
  <div class="porog2">
    <div class="porog3">
      <ol class="lad0">
        <li><span class="lad2"><big></big><small>3</small></span></li>
        <li><span class="lad1"><big></big><small>1</small></span></li>
        <li><span class="lad2"><big></big><small>2</small></span></li>
        <li><span>0</span></li>
        <li><span>x</span></li>
        <li><span>x</span></li>
      </ol>
    </div>
  </div>
  <h2>D7</h2>
</div>
<div class="accord float-l">
  <div class="porog2">
    <div class="porog3">
      <ol class="lad0">
        <li><span>0</span></li>
        <li><span class="lad1"><big></big><small>1</small></span></li>
        <li><span>0</span></li>
        <li><span class="lad2"><big></big><small>2</small></span></li>
        <li><span class="lad3"><big></big><small>3</small></span></li>
        <li><span>0</span></li>
      </ol>
    </div>
  </div>
  <h2>C</h2>
</div>
<div class="clearfix"></div>
<div class="accord float-l">
  <p class="nomer-lada">I</p>
  <div class="porog2">
    <div class="porog3">
      <ol class="lad0">
        <li><span class="lad1 barre bolshoe"><big></big><small>1</small></span></li>
        <li><span class="lad1"><big></big><small>1</small></span></li>
        <li><span class="lad2"><big></big><small>2</small></span></li>
        <li><span class="lad3"><big></big><small>4</small></span></li>
        <li><span class="lad3"><big></big><small>3</small></span></li>
        <li><span class="lad1"><big></big><small>1</small></span></li>
      </ol>
    </div>
  </div>
  <h2>F</h2>
</div>

<div class="accord float-l">
  <p class="nomer-lada">I</p>
  <div class="porog2 lad4">
    <div class="porog3">
      <ol class="lad0 lad4">
      <li><span class="lad1 barre s3"><big></big><small>1</small></span></li>
      <li><span class="lad2"><big></big><small>2</small></span></li>
      <li><span class="lad1"><big></big><small>1</small></span></li>
      <li><span class="lad3"><big></big><small>3</small></span></li>
      <li><span class="lad4"><big></big><small>4</small></span></li>
      <li class="last"><span>x</span></li>
      </ol>
    </div>
  </div>
  <h2>Db</h2>
</div>

<div class="accord float-l">
  <p class="nomer-lada">II</p>
  <div class="porog2">
    <div class="porog3">
      <ol class="lad2">
        <li><span class="lad1 barre s5"><big></big><small>1</small></span></li>
        <li><span class="lad2"><big></big><small>2</small></span></li>
        <li><span class="lad3"><big></big><small>4</small></span></li>
        <li><span class="lad3"><big></big><small>3</small></span></li>
        <li><span class="lad1"><big></big><small>1</small></span></li>
        <li class="last"><span>x</span></li>
      </ol>
    </div>
  </div>
  <h2>Hm</h2>
</div>


* This source code was highlighted with Source Code Highlighter.


Посмотреть пример.

CSS код:
p.nomer-lada { margin: 0em 1.5em 0.5em 1.8em; }
   h2 {
     margin: 0; padding: 0;
     text-align: center;
   }
    .porog2 {/* второй, третий порожек */
      margin: 1em 0 1em 3.5em;
      width: 6.26em;
      border: solid #333;
      border-width: 0 0.13em;
      height: 4.56em;
    }
    .porog3 {/* третий порожек */
      width: 3.07em;
      border-right: 2px solid #333;
      height: 4.56em;
    }
    .porog2 ol {
      margin: 0 0 0 -3.13em;
      padding: .2em 0 0 0; /* верхний выcтуп порожка */
      list-style: none;
      border: solid #333; /* первый и последний порожек, в 4 ладовом аккорде он 4й, а в 3-ладовом 3й */
      border-width: 0 0.13em;
      height: 4.063em; /* фиксируем высоту для правильного масштабирования */
      width: 9em; /* начальная лина грифа на 3 лада */
      overflow: visible;
      position: relative;
    }
   .porog2.lad4 {
     width: 6.26em;
     margin: 1em 3em;
   }
    ol.lad0 {/* первый лад шире других */
      border-left-width: 0.4em;
      margin-left: -3.13em;
      height: 4.36em;
    }
    ol.lad2 {/* использовать для аккордов с баре не на 1 ладу */
      margin-left: -2.87em;  
      height: 4.36em;
    }
    ol.lad4 li {
      width: 12.26em;
    }
    ol.lad4 li.last { border-right: 0; }
    ol.lad4 {
      width: 12.26em;
     margin-right: 3em
    }
    .porog2 li {
      padding: 0;
      border-top: 1px dotted #333;
      height: .8em;
      margin: 0 0 -1px;
      *margin-bottom: -6px; /* IE 6,7 хак */
      position: relative;
      vertical-align:bottom; /* для IE */
    }
    .porog2 span {
      position: relative; /* только так IE нормально отображает номера пальцев */
      line-height: 1.3em;
      top: -.78em;
      *top: -.87em; /* IE 6,7 хак */
      left: -1em;
    }
    span big {/* метка места прижимания струны */
      font-size: 1.4em; /* размер метки места прижимания струны */
      line-height: .9em;
    }
    span small { /* номер пальца */
      position: relative;
      top:-.3em;
      font-size: .9em;
      font-weight: bold;
    }
    /* Положение меток на ладах */
    span.lad1 { left: .8em }
    span.lad2 { left: 3.8em }
    span.lad3 { left: 7em }
    span.lad4 { left: 10em; }
    
    .barre { /* баррэ привязяно к метке */
      margin: 0 0 0 -.25em;
      z-index: 10;
      border: solid #999;
      border-width: .05em 0 .05em .25em;
      display: block;
      white-space: nowrap;
      width: 0.2em;
    }
    .barre.bolshoe { height: 5.4em; }
    .s5 { height: 4.4em; }
    .s4 { height: 3.6em; }
    .s3 { height: 2.9em; }
   .accord {
     display: block;
     border: 1px solid #eee;
     width: auto;
     padding: 1em;
     margin: 1em;
   }


* This source code was highlighted with Source Code Highlighter.


Посмотреть пример.

Откуда у меня эта идея появилась...

Спасибо всем коментаторам первого и второго топика по этой теме — помогло разобраться.
Tags:
Hubs:
Total votes 43: ↑40 and ↓3+37
Comments40

Articles