DEV Community

Cover image for CSS Art: Grape
Maria Edwards
Maria Edwards

Posted on

CSS Art: Grape


As a frontend engineer, you seldom encounter artistic CSS, so participating in this challenge was a rare treat. It also made me hungry for grapes, haha!



I want to admit that I cheated a little bit with the stem using a realistic-looking svg. My first draft utilized the clip-path property. However, its effect was quite cartoonish, so I dumped it.

The submission utilizes the following CSS properties:

  1. display: grid was quite handy in creating the distribution of berries.
  2. Gradients, shadows, and filters to create a somewhat photorealistic grape.
  3. CSS variables.
  4. :nth-child selector to introduce a little variety for the berries' shapes and sizes.
  5. CSS animation so you could "squeeze" those berries.
  6. Units - vh and % - to create responsiveness.

Top comments (2)

magnificode profile image
Dominic Magnifico

Dig the little squish happening when you hover over each grape 😄

best_codes profile image
Best Codes

Ahh! This is by far the best contest submission I have seen yet.
Phenomenal job, keep up the good work!