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 βΊοΈ