Advent of CSS / 03 

Tags :

I discovered the Advent of CSS 2021 a bit late, but decided to give it a try anyway. This entry was retro-posted.

Day 03 / Piano

In this project, we’re creating a keyboard. I love this project because at first glance it seems easy, but there are some more complicated steps involved.

13 white and black keys all a bit wonky
Piano keyboard brief

See the Pen Advent of CSS 2021 / 03 by David Roessli (@davidroessli) on CodePen.


This one was really fun. I was hoping to use the clip-path property for the keys’ outline, but discovered that the overflow value is always hidden which made it very difficult, if not impossible to render the original design.

I reverted to using SVGs which felt a bit like cheating.

The placement of the keys was an interesting challenge to make responsive. Custom properties drive most of the parameters.

I used plain HTML and CSS and Figma to export the SVG paths. Hover is imperfectly implemented.

Posted a response ? — Webmention it

This site uses webmentions. If you've posted a response and need to manually notify me, you can enter the URL of your response below.

Want more ? — prev/next entries