Creating an Apple on a Plate with CSS: A Delicious Journey 🍏

Aleksei Mikhailov — Thu, 21 Mar 2024 14:35:51 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

How about boost of vitamins from super tasty green apple 🍏?

Demo

Journey

Last time I draw something with CSS was several years ago, when I was doing freeCodeCamp CSS projects. So no hardcore, just apple 😃 Well, not just apple, apple on the plate!

This is amazing how many things you can achieve using just box-shadows. But first things first:

1. Plate

For plate I use 2 div elements - for inner side and outside side accordingly. I used clip-path CSS property to cut part of div, which wents outisde of plate. Probably not the best way to do it, but that was the easy one, plus really rare using this property in the real life (the one on the job, of course), so why not to try.

2. Apple

Apple was born as div with different border-radius values in different corners - to create "not perfect" shape.

Adjusting the box-shadows to nail that perfect 3D effect was like trying to season a dish to perfection—too little, and it's bland; too much, and it's overwhelming. After a culinary marathon of tweaking, I finally found the 'chef's kiss' moment where it all just clicked. Who knew CSS could feel like hosting a cooking show, with each shadow adjustment akin to adding just a pinch more salt?

And of course I couldn't stop on this, every apple has depression (hole) around the stem.

In case you like me not master of apples terminology:

The stem of an apple is the small, twig-like part that connects the apple to the tree. It's essentially the apple's lifeline, delivering nutrients from the tree as the apple grows. Once the apple is ripe and picked, the stem remains as a small, woody protrusion at the top of the fruit. It's a familiar sight that often symbolizes freshness and natural growth.

I tried different shapes, but end up with rounded rotated div, and of course with the help of box-shadow I managed to make it more natural.

After that I added stick, which is just brown div, to make it more imperfect I used background gradient and CSS transform function skew.

3. Leaf

To make leaf I used linear-gradient for background, skew function to change its shape, different border-radius for different angles and of course box-shadow.

To make veins on the leaf I use several absolute positioned divs. With help of skew function I was able to make veins pretty thin.

Conclusion

This is my first post here, hope you enjoyed it and learned some apple terminology together with me!

DEV Community: Aleksei Mikhailov