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

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..

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

Веб разработка - CSS

запись гитарных аккордов html+css (теперь с баррэ)

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

Читайте:

5 способов улучшить ваш CSS Убираем лишний отступ внизу изображения Тривиальные задачи по вёрстке (часть 1) CSS counters Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?

Добавить комментарий

Google анонсировал экспериментальную версию Chrome Canary Build

Известная медиакорпорация Google продемонстрировала новейшую опытную модификацию веб-обозревателя Chrome – информацию об этом недавно разместила на ...

Apple открыла сайт для программистов под Intel Mac

Apple открыла в интернете сайт для программистов, разрабатывающих приложения под Macintosh на платформе Intel. Компания планирует сменить платформу ...

.NET Framework

.NET Framework — программная технология от компании Microsoft, предназначенная для создания обычных программ и веб-приложений. Одной из основных ...

Magic Trackpad — начальные впечатления

Что это такое наверное знают все. Если вдруг вы пропустили этот прелюбопытнейший продукт, тогда вам стоит почитать www.apple.com/magictrackpad/ М...

Лабиринт технологий виртуализации Microsoft

Виртуализация всегда была непростой технологией, но компании Microsoft удалось еще больше усложнить ее, выпуская различные продукты виртуализации с ...