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!)
Pure CSS art by the incredibly talented Diana Smith
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.
CodePen by Suzanne Aitchison
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! I was able to copy what I did for ice cube #1, and play around with the position and rotation. I must say, rotating CSS ice cubes was pretty fun.
Last but not least, animated bubbles! (This is a fizzy drink after all.)
#css #learning-to-code #programming #front-end-development #design
