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; } }