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
 
lilxyzz profile image
Travis β€’

Epic! I would eat every bit

Collapse
 
floscode profile image
Florian β€’

Thanks, I see what you did there ^^

Collapse
 
phyl profile image
Phyl β€’

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

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
 
vilan profile image
coco β€’

amazing!

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
 
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
 
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
 
floscode profile image
Florian β€’

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

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
 
laiba_asim profile image
Laiba Asim✨ β€’

I admire your creativity and work. Congratulations on your winπŸŽ‰

Collapse
 
oluwa_billionz_ profile image
Goodluck Reuben β€’

Really nice and creative

Collapse
 
mulu_hunegnaw_b97b522fcdd profile image
Mulu Hunegnaw β€’

Wow great

Collapse
 
traceybee23 profile image
Tracey Beard β€’

How cool! Amazing ^_^

Collapse
 
pointsense profile image
Chairul Rizky β€’

awesome

Collapse
 
zakari714 profile image
Zakari Adamu β€’

This Banana CSS art is awesome