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
: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.