Будни разработчика

#статья дня

Гитаристы тут? Нужно ваше мнение!

Вот человек заморочился и сделал (почти, потому что не контейнировал) кастомный компонент для отображения... гитарных аккордов: https://dev.to/madsstoumann/guitar-chords-in-css-3hk8

Ну и кодпен для ясности: https://codepen.io/stoumann/pen/qEEKJYq

Запись получается примерно такая:

<fret-board frets="4" strings="6" chord="E Major" class="dusty-blue">
  <string-note string="6" open></string-note>
  <string-note string="5" fret="2" finger="2"></string-note>
  <string-note string="4" fret="2" finger="3"></string-note>
  <string-note string="3" fret="1" finger="1"></string-note>
  <string-note string="2" open></string-note>
  <string-note string="1" open></string-note>
</fret-board>

JS тут нужен, чтобы распределить кастомные атрибуты по CSS-переменным. После чего в дело вступают гриды.

Очевидно, аккорды можно записывать для чего угодно: от балалайки и укулеле до десятиструнного монстра от Марченко.

Ну, котаны, у кого тут свои гитарные курсы?

#css #guitar

👍19❤5

www.tgoop.com/htmlshit/3899

1.97K viewsSergey Bekharsky, edited  Nov 11 at 07:59

#статья дня

Гитаристы тут? Нужно ваше мнение!

Вот человек заморочился и сделал (почти, потому что не контейнировал) кастомный компонент для отображения... гитарных аккордов: https://dev.to/madsstoumann/guitar-chords-in-css-3hk8

Ну и кодпен для ясности: https://codepen.io/stoumann/pen/qEEKJYq

Запись получается примерно такая:

<fret-board frets="4" strings="6" chord="E Major" class="dusty-blue">
  <string-note string="6" open></string-note>
  <string-note string="5" fret="2" finger="2"></string-note>
  <string-note string="4" fret="2" finger="3"></string-note>
  <string-note string="3" fret="1" finger="1"></string-note>
  <string-note string="2" open></string-note>
  <string-note string="1" open></string-note>
</fret-board>

BY Будни разработчика