CSS Art: Paneer Tikka

#frontendchallenge #devchallenge #css

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

Inspiration

India is famous for its delicacies, for every 10 kilometers you travel, you will find a new food item that is famous in that area.

Being a South Indian, I like North Indian food, despite having a variety of dishes, one of my favorite starters is Paneer Tikka. This starter is made by adding paneer, onion, capsicum, and tomato to a stick and grilling it in a Tandoor

Demo

Journey

It has been a very long time since I used vanilla CSS, Tailwind CSS totally didn't spoil me XD.

Well jokes apart, I woke up with an email from Devto about this challenge, and in no time I started to think about my favorite dish that I could create.

It was a fun journey that took almost 3-4 hours to put this up, and the neat part it is 100% responsive. The first time I used the General Sibling Selector (~) in CSS, and also added a fun hover animation to eat the paneer tikka.

My step-by-step take on building this ✨

First, I created a plate that was quite simple, I used CSS pseudo-elements to give inner borders, and border-radius to have the croissant-type shape.
Then I proceeded to create a stick and centered it on the plate using a Flexbox.
Next comes the food item, I placed each item ie Paneer, Capsicum, etc. in a div with particular class names, and styled them accordingly using CSS colors, borders, and box-shadows.
All the items are child of the stick so it was easy to align them with a simple flex.
Next comes the sauce (literally), firstly I drew 2 circles and masked them with their pseudo-element to have a semi-circular pattern.
Created 2 extra divs and positioned them at the top right as sauce bowls.
Added some final box-shadow which gave some depth effect to the plate and bowls.
Still, something is missing, yes animation! So I added a small hover effect which on hover eats everything in the plate and leaves one capsicum XD

If you found it delicious you can find the recipe here - Paneer Tikka Recipe

Thank you for reading!

Deveesh Shetty
Github | Twitter

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.