DEV Community

Cover image for I made a CSS Frankenstein ๐Ÿ‘ป
Francesco Vetere
Francesco Vetere

Posted on โ€ข Edited on

15 4 1 1 2

I made a CSS Frankenstein ๐Ÿ‘ป

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! ๐Ÿ˜Š

Buy Me A Coffee

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Googleโ€™s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (9)

Collapse
 
vanessatelles profile image
Vanessa Telles โ€ข

Spooky season is over but I'm always down for some monster-based CSS art! My suggestion for the next one would be Dracula ๐Ÿง›

Collapse
 
francescovetere profile image
Francesco Vetere โ€ข โ€ข Edited

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! โ˜บ๏ธ

Collapse
 
mackfitz profile image
Maciek Fitzner โ€ข

Oh, you are wrong! The spooky season lives on. November is basically October on steroids: darker, colder, grimmer - and I celebrate it accordinigly ;)

Thread Thread
 
francescovetere profile image
Francesco Vetere โ€ข โ€ข Edited

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! ๐Ÿคฉ

Thread Thread
 
mackfitz profile image
Maciek Fitzner โ€ข

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!"

Collapse
 
fullstackscout profile image
Gary โ€ข

Nice. :)

Collapse
 
francescovetere profile image
Francesco Vetere โ€ข

Thank you very much Gary! โ˜บ๏ธ

Collapse
 
mardeg profile image
Mardeg โ€ข

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!

Collapse
 
francescovetere profile image
Francesco Vetere โ€ข

Yeah, I figured it was a little bit easier for me doing that way instead of trying to position 2 different .ear elements ๐Ÿ˜

By the way, thanks for stepping by! Glad you liked it โ˜บ๏ธ

Image of Docusign

๐Ÿ› ๏ธ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more