This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.
Inspiration
I know apples have many great qualities, but if we are honest, bananas are simply the better apples. Just the fact that the code of bananas has been optimized by humans in a way that they come with a practical packaging and, unlike apples, you don’t have an inedible inside part. That’s why bananas are the perfect snack for me on the go, whether in the morning or in the evening, wonderful before sport or as an ingredient in a smoothie or muesli.
Demo
Journey
Since I’m not artistically talented and the banana is unfortunately crooked I couldn’t just use a grid to draw but thanks to my past as a Minecraft player I knew that you can create great artwork with just blocks or in the case of CSS pixels. But since creating pixel art is not one of my strengths either, I took a template and pimped it up a bit with a few faces
Then I wanted to just go ahead and create countless divs with different background colors in a grid to finally create a banana. But with the thought that the banana is about 30 by 50 pixels in size that would be 1500 divs, and so I rather went on the search to make the whole thing a bit clearer and come across this great article, which creates pixel art in CSS through box-shadows.
To make the whole thing a bit more interactive I use the pseudo elements hover and active to peel the banana. Of course an animation by using keyframes could not be missing to draw the attention to the banana for more than 3 seconds.
