DEV Community

loading...
Cover image for The Simpsons in CSS

The Simpsons in CSS

Alvaro Montoro
CSS aficionado βŠ† Web Developer βŠ† Software Developer βŠ† Person
Originally published at alvaromontoro.com ・2 min read

This post is going to be a little bit of showing off (sorry πŸ˜…). It is a personal project that I did over 2 years ago –before joining DEV–, and that CSS {IRL} reminded me about today.

It is a collection of drawings of The Simpsons characters done in CSS. I learned a lot coding them, and I've learned even more since... so I'm scared of looking at my own code now.

Here are some of the drawings (there are 10 in total):

Bart Simpson

This was the first one I did for a CodePen challenge with the colors red, blue, and yellow, which reminded me of Bart.

Homer Simpson

Lisa Simpson

Marge Simpson

Kang

Probably my favorite.

Sideshow Bob

From this one, I really like that the whole hair is a single element... with a ton of box-shadow.

Homer Simpson with circles

This one was also for a CodePen challenge, and I even wrote an article on DEV explaining how it was done. But it is cooler to see it on this animation.

I also have a drawing of Troy McClure (you may remember him from that CSS drawing πŸ™ƒ) and Itchy & Scratchy.


If you liked these CSS drawings, don't miss the CSS illustrations I did last year as part of a 100-day challenge!

Discussion (13)

Collapse
afif profile image
Temani Afif

nah! all of them are embeded images ... inspecting the code ... 🀯🀯
I think I won't be surprised if you do a full simpson episode using only CSS .. you already have all the cast πŸ˜‹

Collapse
alvaromontoro profile image
Alvaro Montoro Author • Edited

I want to do a "short film" in HTML+CSS, but I lack the technical knowledge and skills for the animations... maybe one day...

Collapse
afif profile image
Temani Afif

I think you can start with easy stuff like having the characters on a fixed position and a bubble over them with a text typing animation and you move their mouth slightly to simulate a discussion. This should be easy since you already made the difficult part and I'd imagine it will give a good rendring. Still not a film but can produce amazing scenes

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

That's a good possibility. Maybe just animate squares at the beginning and add shapes little by little.

Collapse
thepeoplesbourgeois profile image
Josh

These are really impressive, but why is nobody talking about the huge bruise on Kang's forehead?

The alien Kang from "The Simpsons"

I mean it just seems painful

Collapse
layzee profile image
Lars Gyrup Brink Nielsen

Well done! πŸ‘

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! 😊

Collapse
breno profile image
Breno

Well done! Just out of curiosity, on average how long to make a drawing like this?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! Each cartoon took around 4-6 hours.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

From this one, I really like that the whole hair is a single element... with a ton of box-shadow.

That's insane! Great drawings as usual.

Collapse
monfernape profile image
Usman Khalil

You never fail to amaze me. Loved your previous works, loved this one.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! I appreciate it.

Collapse
jmau111 profile image
Julien Maury

pretty cool