Member-only story
Pure CSS Art: A Beginner’s Tale
A brief foray into CSS cocktails because… 2020
Earlier this year I first learned that pure CSS art was a thing, and it’s safe to say that my mind was officially blown. I didn’t know you could do so much with just…CSS?? (…and a little HTML, but mostly CSS!)
Naturally I placed CSS art on my learning-to-code bucket list since I’m a sucker for anything visual or creative, but with all of the algorithms and data structures and fundamental JavaScript concepts to learn and study, it was placed on the back burner. This weekend I decided to finally give it a try! At first I thought about making some cute animals using simple shapes like this popular koala:
That would’ve been a lot easier. But instead, in keeping with the theme of 2020, I decided to go with… cocktails! 🍹🍸
I found this great CodePen of a gin and tonic by Suzanne Aitchison and decided to play around by turning it into another favorite summer drink: an Aperol Spritz.
I thought it wouldn’t be too difficult to turn this into a different cocktail, being that so much of the work was already complete (shoutout to that citrus she made!), but it was trickier than I thought.
First I figured that I would change the glass shape, since traditionally an Aperol Spritz is served in a wine glass. Then I changed the color of the drink to a Aperol-looking shade of red, and I turned the lemon slice into an orange with some simple hex codes. There was some trouble-shooting with the glass, yes, but it was still doable!
Then I realized: ice cubes. An Aperol spritz really needs ice cubes. This was a lot trickier. I tried Googling “CSS ice cubes” and without many results, there was a lot of trial and error bringing them to life. I also realized that one ice cube would never be realistic enough. There should be three ice cubes…
