DEV Community

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

The Frontend Challenge: 🍌 bananas are the superior fruit

Florian on March 25, 2024

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack. Inspiration I know apples have many great qualities, but if ...
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 😊

Collapse
 
tr11 profile image
Tiago Rangel

Mesmerizing. Truly the best codepen to ever exist

Collapse
 
floscode profile image
Florian

Thank you, I was also surprised how well the peeling of the banana comes out through the hovering.

Collapse
 
renancferro profile image
Renan Ferro

Howw, what a wonderful thing 😯

Collapse
 
floscode profile image
Florian

Thank you, the faces really help to give the pixelated banana a little more emotion πŸŒπŸ’›

Collapse
 
efpage profile image
Eckehard • Edited

Ist it really CSS if you translate an image pixel by pixel to CSS-commands? Nobody will usually do this manually...

Collapse
 
floscode profile image
Florian

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.

Collapse
 
efpage profile image
Eckehard

good luck coding the Mona Lisa in CSS...

Collapse
 
mulu_hunegnaw_b97b522fcdd profile image
Mulu Hunegnaw

Wow great

Collapse
 
traceybee23 profile image
Tracey Beard

How cool! Amazing ^_^

Collapse
 
zakari714 profile image
Zakari Adamu

This Banana CSS art is awesome