DEV Community

Cover image for The Frontend Challenge: 🍌 bananas are the superior fruit
Florian
Florian

Posted on

The Frontend Challenge: 🍌 bananas are the superior fruit

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 (29)

Collapse
 
erinao profile image
Erin A Olinick

Very a-peel-ing!

Collapse
 
floscode profile image
Florian

Congratulations, you've won the comment section πŸ†

Collapse
 
michaeltharrington profile image
Michael Tharrington

Haha, the peel-upon-hover idea was a great touch! Love the brow sweat, haha!

Collapse
 
link2twenty profile image
Andrew Bone • Edited

Did you try clicking the banana too (hold the click)? πŸ˜…

Collapse
 
michaeltharrington profile image
Michael Tharrington

Lol, no way!! You just blew my mind with that one. πŸ˜†

Collapse
 
faraib profile image
Farai Bvuma

I agree, this gave me a good chuckle

Collapse
 
ben profile image
Ben Halpern

Delightful

Collapse
 
phyl profile image
Phyl

Oh wooow! This is mind blowing. πŸ₯‚ to my favorite fruit and congrats πŸ˜„.

Collapse
 
lilxyzz profile image
Travis

Epic! I would eat every bit

Collapse
 
floscode profile image
Florian

Thanks, I see what you did there ^^

Collapse
 
supermari0s profile image
ΞœΞ¬ΟΞΉΞΏΟ‚

Wow ! Amazing creation !

Collapse
 
andrewtdinh profile image
Andrew Dinh

Awesome! Now, if only you can put the banana in pyjamas and make it walk down the street :).

Collapse
 
floscode profile image
Florian

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.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

No doubt bananas are better in some or the other way than apples.

Collapse
 
floscode profile image
Florian

some (me) would even say in an overwhelming majority :D

Collapse
 
vilan profile image
coco

amazing!

Collapse
 
thevinitgupta profile image
Vinit Gupta

Simple, yet amazing 😍

Collapse
 
floscode profile image
Florian

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 😊

Some comments may only be visible to logged-in visitors. Sign in to view all comments.