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

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 Piano

    CSSDeck G+