Pull to refresh

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

CSS *
Запись гитарных аккордов при помощи HTML,CSSКак обычно представляют гитарные аккорды на веб-страничках?
Картинками!

Вот только не всегда это удобно, потому что их приходиться рисовать.

Вот у меня родилась идея:
отображать гитарные аккорды используя только 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: О версии с поддержкой баррэ читайте в следующем топике.
Tags: csshtmlxhtmlверсткавеб-дизайнгитарааккорды
Hubs: CSS
Total votes 31: ↑29 and ↓2 +27
Comments 34
Comments Comments 34

Popular right now