r3code 11 мар 2009 в 20:01

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

3 мин

5.8K

CSS*

+27

Комментарии 34

spyfzm 11 мар 2009 в 20:04

Отлично! =)

jeje 11 мар 2009 в 20:04

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

r3code 11 мар 2009 в 22:42

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

Ashot 11 мар 2009 в 20:36

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

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

r3code 11 мар 2009 в 22:47

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

donskikh 11 мар 2009 в 20:37

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

r3code 11 мар 2009 в 22:51

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

tenshi 11 мар 2009 в 22:28

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

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

r3code 11 мар 2009 в 22:50

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

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

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

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

tenshi 12 мар 2009 в 00:37

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

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

ashofthedream 12 мар 2009 в 01:26

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

ivv 12 мар 2009 в 02:11

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

11, 12, 13…

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

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

tenshi 12 мар 2009 в 02:29

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

r3code 12 мар 2009 в 11:38

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

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

tenshi 12 мар 2009 в 12:16

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

r3code 12 мар 2009 в 12:20

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

tenshi 12 мар 2009 в 12:27

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

r3code 12 мар 2009 в 11:39

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

tenshi 12 мар 2009 в 11:51

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

r3code 12 мар 2009 в 12:04

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

tenshi 12 мар 2009 в 12:21

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

r3code 12 мар 2009 в 12:37

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

tenshi 12 мар 2009 в 13:10

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

r3code 12 мар 2009 в 14:33

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

Lond 12 мар 2009 в 10:41

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

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

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

r3code 12 мар 2009 в 11:42

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

Maxmyd 12 мар 2009 в 12:00

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