CSS Art and Musical Instruments:
A couple months ago, I decided to take on the challenge of creating five musical instruments using nothing but a bunch of divs and CSS. I also gave myself the added challenge of completing all five instruments for a project, giving me about one week to complete them (on top of building an interactive, responsive site).
Am I crazy?
Maybe just a little.
I first started with the keyboard, which was the easiest of the five to make. For the keyboard, I started with a rectangle and added a before and after element to it. I used the borders on the psuedo-elements to create the trapezoids on either side of the rectangle. I then created the keyboard stand, using two more rectangles (which I rotated to create the “X” shape) and four circles for the horizontal bars, two at the top of the X, and two at the bottom. After that, all that was left was to create the music stand that sits on the keyboard. I made three horizontal rectangles and five vertical rectangles, and used flexbox to space the bars out evenly inside their respective containers. I also added a white rectangle behind the stand to resemble sheet music.
Done! Super Simple!
…Then I moved on to making an acoustic guitar.
I knew that the guitar was going to be a little trickier because the body isn’t exactly a rectangle. Or even a circle, for that matter. For the acoustic, I decided to play around with the border-radius property. As far as I am aware, at the time of writing this, the border-radius only changes the four corners of a rectangle; there’s no way to get an “8” shape, like the body of the acoustic. So I actually used two divs to create the body, as well as another two that I had turned into circles (again, with the lovely border-radius) and used their side borders to smooth the connection between the top and bottom halves of the body. I then used border-radius again to create the sound hole and pickguard. The bridge (which is also on the body) was my first introduction to using clip-path. The biggest challenge there was trying to get a rounded bottom edge, but in the end it was fairly easy to use.
I also used clip-path for the head of the guitar. Flexbox made another appearance for the tuning pegs, as well as the guitar strings. The neck/fretboard was made using one div and a pretty intense linear-gradient. (Or, at least it felt intense!)
I couldn’t have the guitar floating in mid-air, so I gave it a stand that consisted of three rectangles at the bottom of the guitar and four circles — two at the bottom, and one at each side of the guitar neck.
And just like that, we’re halfway there! (But wait, 2 isn’t half of 5…it is in this case!)
After the acoustic guitar was done, I started working on the electric and base guitars.
For these two guitars, I reused what I could from the acoustic guitar and started there. That meant that I had already completed the: neck/fretboard, strings, and the guitar stand. I also had most of the div structure in place, as well as a starting point for the tuning pegs. That left me with the body and the head of both guitars (which, SPOILER, are the same shape for both) to create.
Both the body and the head were created using clip-path, but in order to get there, I had to do a little manual work. I first drew the two shapes by hand (using my very own Stratocaster as a model), and then traced them with a black marker on a page protector. I then taped that page protector to my monitor and followed that outline with a clip-path generator. After that, it was a matter of using a few linear gradients on the electric guitar to get the sunburst theme, and finding the hex code for the Lake Placid Blue colour of the bass, and these guitars were almost done! The pick guards were also made using clip-path, and the pickups, pickup selector, knobs, tremolo bar, bridge, and jack input were a matter of creating lots of little divs, mostly in the shape of a rectangle or circle, and another special appearance made by flexbox.
The last addition that I made for these guitars was the amp. The amp was as simple as the keyboard to make. All of the knobs were were separated into three containers (each using flexbox), and the speaker was done with another linear gradient.
Almost there!
The last instrument that I tackled, the drum kit, was certainly more of a challenge than the previous more; mainly because there are so many components.
For the drum kit, I decided that I needed to make the drums look 3D, so I created five divs (one for each drum head) and rotated four of them along the x-axis, and the bass drum (middle drum) along the z-axis.
The most important thing that I learned from doing this, is that box shadows are also impacted by the rotation. So, depending on the rotation, 100px can look like 1px. The largest box shadow that I made (which I used for the sides of each drum) was NOT for the floor tom (left side), but actually for the middle tom (top left drum), which was a whopping 1000px.
Lesson learned.
Before making the stands, I made the cymbals, which I had also rotated. The second most important lesson I learned, was that pseudo-elements are impacted by rotation. Of course, this made sense, I had just come to this conclusion with the box shadows. What I wasn’t expecting was that the border-radius for the elements would also be impacted. To make a long story short, I did a lot of playing around with very specific pixel values to get the top semi-circle shape of the cymbal.
The last piece of the drum kit puzzle were the drum and cymbal stands…and this was a puzzle in and of itself. I had decided to position all the instruments absolutely, relative to its outermost parent container, which didn’t seem like a problem. At first.
When I went to position a stand for one of the cymbals, the ride cymbal (left side) in particular, I would notice that the legs of the stand would overflow the bounds of the outermost parent container. So every time I played with the positioning of one of the stands, I would have to reposition the corresponding cymbal or drum as well. Once that instrument was in place, I would then shift the other instruments around it so that they would all, more or less, accurately represent the drum kit as a whole.
After the stands were positioned where they needed to be, the drum kit was done, which meant that I had completed all five instruments!
Overall, I think that they turned out really well, and I would definitely try to use CSS as an art media again. Just…maybe not within the timeframe of a week!
Tried your hand at making CSS art? How did it turn out? Let me know in the comments!
