Advent of CSS / 03
Posted in daily
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.
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.