Creating an Apple on a Plate with CSS: A Delicious Journey 🍏
Tags: frontendchallenge, devchallenge, css
Published: 2024-03-21 14:35:51

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

## Inspiration 
<!-- What snack are you highlighting today? -->
How about boost of vitamins from super tasty green apple 🍏?

## Demo
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->
{% codepen https://codepen.io/plxel/pen/ExJWwrV %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

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

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

### 1. Plate
For plate I use 2 div elements - for inner side and outside side accordingly. I used [clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/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-shadow`s 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](https://developer.mozilla.org/en-US/docs/Web/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!

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->