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

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

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more