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.
Top comments (27)
Very a-peel-ing!
Congratulations, you've won the comment section π
Haha, the peel-upon-hover idea was a great touch! Love the brow sweat, haha!
Did you try clicking the banana too (hold the click)? π
Lol, no way!! You just blew my mind with that one. π
I agree, this gave me a good chuckle
Delightful
Epic! I would eat every bit
Thanks, I see what you did there ^^
Wow ! Amazing creation !
Awesome! Now, if only you can put the banana in pyjamas and make it walk down the street :).
With enough time and the necessary skills to create pixel art, you could make the banana wear a pyjama and display different frames one after the other for walking down the street, using keyframes.
Oh wooow! This is mind blowing. π₯ to my favorite fruit and congrats π.
No doubt bananas are better in some or the other way than apples.
some (me) would even say in an overwhelming majority :D
amazing!
Simple, yet amazing π
The simplicity through the use of the box shadows has also impressed me and of course the fact that the HTML remains very clear as a result π
Mesmerizing. Truly the best codepen to ever exist
Thank you, I was also surprised how well the peeling of the banana comes out through the hovering.
Howw, what a wonderful thing π―
Thank you, the faces really help to give the pixelated banana a little more emotion ππ
Ist it really CSS if you translate an image pixel by pixel to CSS-commands? Nobody will usually do this manually...
You've made a valid point. Manually coding each pixel into CSS is not the usual practice. Nevertheless, art is all about perspective, and this method allows for a different form of artistic expression using CSS.
good luck coding the Mona Lisa in CSS...
This Banana CSS art is awesome
Some comments may only be visible to logged-in visitors. Sign in to view all comments.