Home » Web » HTML & CSS » HTML and CSS Interactive Piano

HTML and CSS Interactive Piano

html-css-interactive-piano

view fullscreen demo  view jsfiddle

I have been sick all day and I figured I would share what I did.  It’s a Saturday and I have come down with a nasty case of the sniffles.  I started thinking about what I could share that was interactive.  I thought what if I could create a piano in just HTML and CSS.  That was too easy.  I then thought what if when a user clicks a note, it would show that note, but only for a moment.  That is where I had to implement a bit of jquery.  Still pretty easy but it started getting a bit hectic towards the end with all of the minor notes.

Note: I used quite a bit of absolute positioning. This entire thing will break if you view it on a smaller screen. This is why I could not include a demo on this page.

Leave a Reply

file not found1223