Ajax Loader
×

Pure CSS3 Piano

A classical piano made in pure CSS3. This piano also includes a menu including a search field, a drop down, tooltips and a full contact form that is just ready to work! All the white note keys are created using divs while for the black note keys, a span tag is used inside the particular div. The active state or the pressed state of the keys is done using the changes in box-shadow and that shadow is enhanced by creating two triangles using :after and :before pseudo elements positioning them accordingly so that the inset shadow can be created.

This will look good in all the browsers that support CSS3 like Webkit browsers, Firefox, Chrome and Internet Explorer 9. Feel free to look at the code to learn more.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

6 Comments

× New

Sign In to comment

Taufik Nurrohman:

@violinchris: Haha.. God almighty Licence is just a joke. You may use or modify this works as long as you add a clear attribution of the author.

If you don't mind, you can give a credit link to this address instead ⇒ hxxp://latitudu.blogspot.com :)

violinchris:

Nice piano, and searching for this led me to cssdeck, so thanks twice. I have my own version of css piano that is not so pretty, but it works. I am not familiar with the "God Almighty License." I googled for it, etc. Can I use this css assuming I leave the attribution?

Taufik Nurrohman:

No. I want this pure CSS.
And also, sorry, I do not know if the link inside my experiment are not allowed hehe

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+