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.