DEV Community

Cover image for Iron Man... using HTML and CSS?
Better Coding Academy
Better Coding Academy

Posted on • Edited on

Iron Man... using HTML and CSS?

I decided to create Iron Man using only HTML and CSS.

Wait, what?

Yep. Using no SVGs and no clip paths. Only good old fashioned elements, CSS triangles, border-radius, transforms, and a few pseudo-elements here and there.

But why?

I really wanted to push myself and see what exactly was possible. And that's exactly what I did.

I want to have a look at this right now.

Sure thing! Here's a link to the web page on Surge: https://iron-man.surge.sh/

Additionally, here's a video where I explain the code in some detail:

Here's the source code as well 😁

Happy coding!

Top comments (5)

Collapse
 
vuild profile image
Vuild

Super cool.

I made the first one in 2012 but yours is much better.
vuild.com/iron-man/

Also I made a face last week (not trying to spam but I thought you might like it).
vuild.com/face

Your walkthrough video is really good all round, subscribed, bell & followed here. 👍

Collapse
 
bettercodingacademy profile image
Better Coding Academy

Wow! I remember seeing your Iron Man whilst researching existing options and being inspired to do this project. Nice job!

Collapse
 
vuild profile image
Vuild

Awesome. Thanks that's always cool to hear. I do it more like graffiti & you do a more well thought out method. I wish I did it your way (better for work).

There is more crazy ones on my site (news) or codepen.

You inspired people in this thread & the cycle continues. 🔥

I'll keep an eye out for your videos.

Collapse
 
hiattzhao profile image
Hiatt

Very cool! You inspire me to do something similar. Definitely a CSS challenge worth working on.

Collapse
 
dineshbabu153 profile image
Dineshbabu Thoota

wow. Its cool