This is a submission for Frontend Challenge v24.04.17, CSS Art: June.
Inspiration
This submission was inspired by Frontend Friday Folks Fighting CSSBattle.dev hosted by Virtual Coffee. It is an activity where you take on a challenge at CSS Battle. I completed the CSS Battle #175. Evil Cat challenge.
Demo
Journey
This challenge provided an excellent learning experience. The task was to create a cat using CSS and HTML, which involved crafting shapes that are not typically seen on websites.
I started by breaking the image into 8 parts:
- Face
- Left ear
- Right ear
- Left eye
- Left pupil
- Right eye
- Right pupil
- Nose
I created a container that housed all the individual parts and positioned it at the center of the screen. The face was a simple rectangle with rounded corners achieved by applying a border radius. The ears were a bit more challenging. I solved this by creating a rectangle with only three borders—left, right, and bottom. The side borders were made transparent, and I adjusted the border widths until the desired triangle shape was formed, then rotated them to align correctly. The eyes are rectangles with two rounded corners on opposite sides and rotated for correct alignment. The pupils are rectangles with rounded corners. The nose was created using the same method as the ears.
I learned some new CSS techniques, including how to center an item on the screen, create a triangle, apply rotation, and round corners. I am proud to have achieved a 100% match for this challenge. In the future, I hope to add animation to make the pupils move from side to side.
Top comments (6)
Nice work!
Wow, that's a great job! I started doing CSSBattle almost every day last month and noticed how my understanding of CSS proprieties improved. Also, I'm a VC member too and I'd love to join a session for doing CSSBattle's challenge but I can't due to my side job ;(
I'd like to add that the cat isn't evil.
That's fantastic! Glad to meet other VC members. I also can't join the live sessions due to my job, but I look at what challenge they did and do it asynchronously.
Awesome, it could look like the CSS Cat I made once, but what makes that cat evil?
It's a black cat stereotype.
I figured. Black cats are not evil 😠 Not more evil than any other cats of any other colour.. but I do not believe that any cat is evil at all. Did you know that black cats are less likely to be adopted? Well, it is thanks to such a stupid stereotype (as well the one with that black cats are supposedly unlucky(!?). I have only kept black cats, they are the most intelligent ones and learning about other people's faulty beliefs and prejudices about black cats, just increases my love for them. I wish people would stop maintaining such harmful stereotypes.