r3code Mar 11 2009 at 17:01

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

3 min

6.1K

CSS *

+27

Comments 34

spyfzm Mar 11 2009 at 17:04

Отлично! =)

jeje Mar 11 2009 at 17:04

Здесь можно увидеть реальное применение SVG.

r3code Mar 11 2009 at 19:42

Можно, но опять он гораздо сложней. Есть проекты уже и по отрисовке табов с помощю SVG из GuitarPro, но мне например столько сложностей никчему.
К тому же к сожалению SVG еще не очень-то хорошо прижился.

Ashot Mar 11 2009 at 17:36

неплохая идея. никогда о таком не задумывался, наверное уже за ненандбностью табов

а что за цифра у обозначения зажатой струны? единственное, что я придумал — что это обозначает каким пальцем зажимать, если так, то надо бы легенду для этого. и © не подходит для обозначения — должно сразу в глаза бросаться, а © здесь теряется среди линий — • для этого лучше подойдёт

r3code Mar 11 2009 at 19:47

Да правильно, цифра рядом с обозначением струны — каким пальцем зажать. Да описать ее то я забыл.
Я хотел сначала вообще просто буквой «O» сделать, но она не совсем круглая, а значок bull показался маловат, хотя надо попробовать сделать вариацию с ним.

donskikh Mar 11 2009 at 17:37

Главное — полезно. Теперь ищите, где это можно применить на деле и вам цены не будет.

r3code Mar 11 2009 at 19:51

Поищу конечно ) Сейчас еще хороших советов от народа пособираю и сделаю обновленную версию.

tenshi Mar 11 2009 at 19:28

/r/ пиано-раскладки. желательно с одной вёрсткой или хотябы с двухсторонним конвертером.

ещё есть символы вида «цифра в кружочке» — можно заюзать их.

r3code Mar 11 2009 at 19:50

/r/ пиано-раскладки. желательно с одной вёрсткой или хотябы с двухсторонним конвертером.

Объясните подробнее, что имели в виду, я не понял.

ещё есть символы вида «цифра в кружочке» — можно заюзать их.

Имеете в виду те что из набора шрифтов Wingdings?

tenshi Mar 11 2009 at 21:37

ну, хотелось бы то же саоме, но ещё и для пианино

я имею ввиду вот эти: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳

ashofthedream Mar 11 2009 at 22:26

Тогда, для полноценного их использования, нужны еще 21, 22, 23 и 24 :)

ivv Mar 11 2009 at 23:11

> Да правильно, цифра рядом с обозначением струны — каким пальцем зажать

11, 12, 13…

Это что когда на пианино играешь нужно что то зажимать пальцами ног?

я не очень то разбираюсь в музыке :)

tenshi Mar 11 2009 at 23:29

на пианино можно играть нескольким человекам одновременно ;-)

r3code Mar 12 2009 at 08:38

К сожалению не все видны символы

у вас также?
Конечно можно сделать чтобы использовалься особенный шрифт, css позволяет подгрузить собственный шрифт, нужно только знать какой это шрифт.

tenshi Mar 12 2009 at 09:16

у меня все видны, ибо я доставил «шрифты с поддержкой иероглифов» =)

r3code Mar 12 2009 at 09:20

Можешь мне название шрифта этого дать? Я бы его где нибудь бы скачал.

tenshi Mar 12 2009 at 09:27

попробуй ms gothic или ms mincho

r3code Mar 12 2009 at 08:39

С записью для пианино не знаком, ибо гитаре обучался — дайте посмотреть как это выглядит.

tenshi Mar 12 2009 at 08:51

ну… вместо струн рисуются клавиши и указывается какую клавишу каким пальцем нажимать…

r3code Mar 12 2009 at 09:04

Хм… а можете картинку дать или ссылку, мне чего-то слова даже подобрать сложно по которым это можно найти.

tenshi Mar 12 2009 at 09:21

img-fotki.yandex.ru/get/3108/sairi-na-tenshi.16/0_204c7_99af796a_orig
тока лучше повернуть на 90 градусов…

r3code Mar 12 2009 at 09:37

Попробую разобраться.
Выглядеть оно должно именно так?

tenshi Mar 12 2009 at 10:10

да без разницы =) главное — чтобы понятно было что, чем и когда нажимать.

r3code Mar 12 2009 at 11:33

Ладно, это я думаю будет как развитие темы, чуть попозже, отметку для себя сделал. Попробую сделать.

Lond Mar 12 2009 at 07:41

Хорошая тема, никогда над ней не задумывался.

Пара замечаний:
1. Думаю, цифрами лучше обозначать лады — так понятнее будет, что 0 — открытая струна (нулевой лад), да и проще разрисовывать аккорды на верхних ладах;
2. В Chrome верстка едет.

По-поводу баррэ — можно сделать класс, фоном у которого будет картинка, размером, допустим 5х5, тянущаяся по вертикали, фон выровнять по центру и применять его к ul лада с баррэ. Но останется проблема с обозначением малого баррэ.

r3code Mar 12 2009 at 08:42

1. На гитарных акордах обычно номер лада указывается сверху слева, как римская цифра над первым ладом. Пока не занимался этим еще.
2. Хром не использовал, так как он первой бетой поразил меня своей глючностью и вылетами. Особой нужды в нем не испытываю, FF на все хватает.

Maxmyd Mar 12 2009 at 09:00

Осталось только написать код, который будет преобразовывать текстовое обозначение аккорда в графическое. Типа вводишь Dm, а он тебе рисует. И простенький веб-сервис организовать для тех, кто на сайте аккорды к песням публикует.