Pull to refresh

Запись гитарных аккордов HTML+CSS (теперь с баррэ)

CSS *
Большое и малое баррэ (CSS,HTML only)
Увлекло меня это дело — описание гитарных аккордов, по научному — аппликатура. Начало было положено в предыдущим топике про запись аккордов и теперь получило своё развитие.
Я учел пожелания и сделал новую версию.
Теперь метка прижимаемой струны — это точка • (& 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;
}


Остальной код можно посмотреть на странице с примером.

Вариация с цифрами внутри меток


Аккорд, вариант с номерами пальцев внутри меток
Еще один пример — цифра обозначающая номер пальца находиться внутри метки. Сделал по комментарию 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
Tags:
Hubs:
Total votes 40: ↑39 and ↓1 +38
Views 3K
Comments Comments 79