Hi folks 👋 Today, I wanted to share with you this cool CSS art I made as part of a spooky CSS Battle 👻:
This was not only a lot of fun, but really educational too.
- I found out that the head shape could be easily accomplished with a fancy
border-radius, which I generated with this cool website. Basically, that shape is obtained with a:
border-radius: 15% 15% 100% 100% / 15% 15% 100% 100%;
- Also, the hair fringe was perfectly suitable for a
clip-path. I used this other cool website in order to better visualize what I was clipping. I basically want a triangle, so I can obtain it with:
clip-path: polygon(100% 0, 0 0, 50% 100%);
- The mouth was also perfectly suitable for a
clip-path, since it is essentially a semicircle:
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
📽️ If you enjoy these kind of things, here's a video of me speedrunning through the whole process 😉
Of course, as often happens in CSS, there are a lot of different ways we could accomplish the same results. Let me know if you would have done something differently in any way, I'm really curious! 😊
Top comments (9)
Spooky season is over but I'm always down for some monster-based CSS art! My suggestion for the next one would be Dracula 🧛
Yup, that would be great! I could definitely try working on it 🧛
And yeah, spooky season is defintely over, but anyways, I saw this target and I tought "that's too cool, I need to give it a try!"
Now I'm all-in for Christmas season! Can't wait to see what challenges cssbattle.dev will propose this year🎄
And by the way, thanks for stepping by! ☺️
Oh, you are wrong! The spooky season lives on. November is basically October on steroids: darker, colder, grimmer - and I celebrate it accordinigly ;)
WOW! 💫 That'astonishing! I particularly love the play-pause animation, and the use of the "checkbox trick" in order to simulate a click event without any JS!
This is really some next-level stuff! 🤩
Animation and 3D in CSS have been an obsession of mine for - on and off - almost 4 years now, and every day brings new ideas, and CSS is constantly being developed, with new properties that open so many new possibilities. "What a time to be alive!"
Nice. :)
Thank you very much Gary! ☺️
Great video of your work, I especially love that there's an actual bolt all the way through the head for the "ears" using z-index to hide it!
Yeah, I figured it was a little bit easier for me doing that way instead of trying to position 2 different
.earelements 😁By the way, thanks for stepping by! Glad you liked it ☺️