HTML5, CSS3 & JS Experiments

By Martin Ivanov

Guitar Chord Diagrams

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

<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>
</acidjs-xchord>

Interested in more Guitar/HTML5/CSS3/JavaScript stuff? Check my HTML5 Guitar Chords Finder and Player control.

Demo

6-String Axe

7-String Axe

4-String Bass

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XChord/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XChord/classes/XChord.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <h4>6-String Axe</h4>
            
            <acidjs-xchord label="A">
                <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>
            </acidjs-xchord>
            
            <acidjs-xchord label="Am">
                <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="1"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord label="C">
                <acidjs-xchord-string key="e" state="muted"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="pressed" fret="1"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="empty"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord label="Dm">
                <acidjs-xchord-string key="e" state="muted"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="muted"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="1"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord label="D" startat="5">
                <acidjs-xchord-string key="e" state="muted"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="1"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="1"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <h4>7-String Axe</h4>
            
            <acidjs-xchord frets="5" startat="1" label="E" description="E-major">
                <acidjs-xchord-string key="b"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="pressed" fret="1"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="empty" fret="0"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord frets="5" startat="1" label="Em" description="The E-minor chord">
                <acidjs-xchord-string key="b"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="empty" fret="0"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="empty" fret="0"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord frets="5" startat="1" label="G" description="The G-major chord">
                <acidjs-xchord-string key="b"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="empty" fret="0"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="empty" fret="0"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="empty" fret="0"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="3"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord frets="5" label="D" startat="5" description="This is D-major">
                <acidjs-xchord-string key="b"></acidjs-xchord-string>
                <acidjs-xchord-string key="e"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="muted"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="2"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord frets="5" label="Bm" startat="1" description="B-minor">
                <acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="pressed" fret="4"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="pressed" fret="4"></acidjs-xchord-string>
                <acidjs-xchord-string key="b" state="pressed" fret="3"></acidjs-xchord-string>
                <acidjs-xchord-string key="e" state="pressed" fret="2"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <h4>4-String Bass</h4>
            
            <acidjs-xchord frets="6" size="1.5" startat="4" label="Em" description="This is E-minor">
                <acidjs-xchord-string key="e" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="empty" fret="0"></acidjs-xchord-string>
            </acidjs-xchord>
            
            <acidjs-xchord frets="6" size="1.5" startat="1" description="Just an empty neck">
                <acidjs-xchord-string key="e" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="a" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="d" state="empty"></acidjs-xchord-string>
                <acidjs-xchord-string key="g" state="empty"></acidjs-xchord-string>
            </acidjs-xchord>
            
        
/*
 * X-Chord HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

acidjs-xchord li::before,
acidjs-xchord .acidjs-xchord-empty::after,
acidjs-xchord .acidjs-xchord-muted::after,
acidjs-xchord li:last-child b::before,
acidjs-xchord li:nth-child(12) b:first-child span::after,
acidjs-xchord .acidjs-xchord-fret-odd li:nth-child(2n+1) b:first-child span::after,
acidjs-xchord .acidjs-xchord-fret-even li:nth-child(2n+2) b:first-child span::after
{
    position: absolute;
}

acidjs-xchord,
acidjs-xchord *,
acidjs-xchord::before,
acidjs-xchord::after,
acidjs-xchord *::before,
acidjs-xchord *::after
{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xchord h3,
acidjs-xchord .acidjs-xchord-empty::after,
acidjs-xchord .acidjs-xchord-pressed::after,
acidjs-xchord .acidjs-xchord-muted::after,
acidjs-xchord li:nth-child(2n+1) b:first-child span::after
{
    font-size: 1em;
    line-height: 1em;
}

acidjs-xchord b,
acidjs-xchord li,
acidjs-xchord li:last-child b::before
{
    width: 100%;
}

acidjs-xchord a,
acidjs-xchord p,
acidjs-xchord h3,
acidjs-xchord li:last-child b::before
{
    text-align: center;
}

acidjs-xchord .acidjs-xchord-fret-odd li:nth-child(2n+1) b:first-child span::after,
acidjs-xchord .acidjs-xchord-fret-even li:nth-child(2n+2) b:first-child span::after,
acidjs-xchord li:nth-child(12) b:first-child span::after
{
    content: "\25cf";
    left: 50%;
    margin: -.5em 0 0 -.3em;
    color: #ccc;
}

acidjs-xchord:empty,
acidjs-xchord *:not(span):empty
{
    display: none;
}

acidjs-xchord,
acidjs-xchord b
{
    border: solid 1px #000;
}

acidjs-xchord b,
acidjs-xchord li b:last-child
{
    border-bottom: 0;
}

acidjs-xchord
{
    vertical-align: top;
    margin: .1em;
    display: inline-block;
    width: 10em;
    padding: 0 1.5em 1.5em;
    font: normal 1em/1em Garamond, Georgia, "Times New Roman", Serif;
    cursor: default;
    color: #000;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xchord h3
{
    font-family: inherit;
    color: inherit;
}

acidjs-xchord a
{
    display: none;
    /*margin: .2em 0 0;
    color: #666;
    text-decoration: none;
    font: normal .6em Helvetica, Arial, Sans-serif;*/
}

acidjs-xchord p
{
    padding: 1.75em 0 0;
    font-size: .8em;
    font-style: italic;
}

acidjs-xchord h3
{
    padding: .5em 0;
}

acidjs-xchord li
{
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
}

acidjs-xchord li b:last-child
{
    border-top: 0;
    border-right: 0;
    width: 0;
}

acidjs-xchord li:last-child b::before
{
    content: attr(data-key);
    bottom: -1em;
    margin: 0 0 0 -50%;
    text-transform: uppercase;
    font-size: .75em;
    line-height: .75em;
}

acidjs-xchord li::before
{
    counter-increment: fret;
    content: counter(fret, upper-roman)".";
    margin: .6em 0 0 -2.2em;
    font-size: .6em;
}

acidjs-xchord b
{
    display: table-cell;
    vertical-align: middle;
    height: 2em;
    font-weight: normal;
}

acidjs-xchord li:last-child
{
    border-bottom: solid 1px #666;
}

acidjs-xchord div
{
    position: relative;
    counter-reset: fret 0;
}

acidjs-xchord li:nth-child(12) b:first-child span::after
{
    color: #333;
}

acidjs-xchord li:nth-child(11) b:first-child span::after
{
    visibility: hidden;
}

acidjs-xchord .acidjs-xchord-pressed::after
{
    content: "\25cf";
    margin: 0 0 0 -.3em;
}

acidjs-xchord .acidjs-xchord-empty::after
{
    content: "\25c9";
    margin: -1.5em 0 0 -.4em;
}

acidjs-xchord .acidjs-xchord-muted::after
{
    content: "\2718";
    margin: -1.5em 0 0 -.5em;
}

@media print
{
    acidjs-xchord
    {
        border: 0;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) 
{ 
    acidjs-xchord .acidjs-xchord-muted::after
    {
        margin: -1.4em 0 0 -.3em;
    }
}