DEV Community

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 ...

Read full post

Erin A Olinick • Mar 29 '24

Very a-peel-ing!

Florian • Mar 29 '24

Congratulations, you've won the comment section 🏆

Michael Tharrington • Apr 1 '24

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

Andrew Bone • Apr 2 '24 • Edited

Did you try clicking the banana too (hold the click)? 😅

Michael Tharrington • Apr 2 '24

Lol, no way!! You just blew my mind with that one. 😆

Farai Bvuma • Apr 3 '24

I agree, this gave me a good chuckle

Ben Halpern • Mar 25 '24

Delightful

Travis • Mar 26 '24

Epic! I would eat every bit

Florian • Mar 26 '24

Thanks, I see what you did there ^^

Phyl • Apr 3 '24

Oh wooow! This is mind blowing. 🥂 to my favorite fruit and congrats 😄.

Andrew Dinh • Mar 26 '24

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

Florian • Mar 27 '24

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.

Μάριος • Mar 28 '24

Wow ! Amazing creation !

Jitendra Choudhary • Mar 26 '24

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

Florian • Mar 26 '24

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

coco • Mar 31 '24

amazing!

Vinit Gupta • Mar 26 '24

Simple, yet amazing 😍

Florian • Mar 26 '24

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 😊

Tiago Rangel • Mar 26 '24

Mesmerizing. Truly the best codepen to ever exist

Florian • Mar 26 '24

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

Renan Ferro • Mar 26 '24

Howw, what a wonderful thing 😯

Florian • Mar 26 '24

Thank you, the faces really help to give the pixelated banana a little more emotion 🍌💛

Eckehard • Mar 26 '24 • Edited

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

Florian • Mar 26 '24

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.