Guitar Chord Diagrams as… HTML5 Web Components. This Rocks!

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Being kind of a pest about HTML5 Web Components these days here, and I’m sorry about that. But this new one rocks, and I am really happy with the result of the fun I had the other day, trying to build a guitar chord diagram with pure CSS

Here it is – AcidJs.XChord – a HTML5 Web Component for plotting purely CSS3-driven, image-less, scalable and printer-friendly guitar chord diagrams, supporting any number of strings, wrapped as a fun and easy to use custom tag:

[sourcecode language=”html”]
<acidjs-xchord label="A" startat="1" label="E" description="The A-major chord">
    <acidjs-xchord-string key="e" state="muted" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="a" state="empty" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>

Using the tag above you get:

6-String Guitar Diagrams:


7-, 8-, 9- (yes, I love Djent) Axe Diagrams:


Bass Diagrams:


… Virtually any-string-number guitar chord diagram.

HTML Attributes of the <acidjs-xchord></acidjs-xchord> Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

HTML Attributes of the <acidjs-xchord-string></acidjs-xchord-string> Tag

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Fulfill my child dream of becoming a rock star – check the demo and get the component. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Categories and Tags

© 2006 - 2023 Martin Ivanov