DEV Community

loading...
Cover image for Drawing La Muerte with CSS and HTML

Drawing La Muerte with CSS and HTML

Alvaro Montoro
CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person
・1 min read

This past weekend was Halloween and Día de Muertos, and we spent some time at home watching themed movies. One of them was The Book of Life, which tells a story of the Day of the Dead (or Día de Los Muertos).

In the end credits, there's an illustration of one of the characters (La Muerte/La Catrina) that I really liked, so I tried to come up with a similar looking drawing and ended up with this:

This illustration took me a little longer than usual (around 2 hours) because I had some issues figuring out some of the shadows and gradients... and it is not exactly as I wanted. Still, I'm happy with the result in general.

Also, I kind of regret using the vw unit instead of vmin because the drawing gets cut in bigger screens, and it looks a bit weird.

As with the other illustrations I've shared before, here it is a 20x video on Youtube on how it was done:

If you want a shorter version, here's a 1-minute version of the video above, showing the whole process.

Discussion (3)

Collapse
tlylt profile image
Liu YongLiang

Cool!
By the way, do you have any recommended resources for someone looking to get into this 😄 ?

Collapse
alvaromontoro profile image
Alvaro Montoro Author • Edited

Thanks!
For resources, I'd recommend checking the entries on MDN docs for box-shadow, backgrounds, and gradients. Then explore the code on demos from people like Lynn Fisher, Jhey Tompkins, Suzanne Aitchison, Inès, Ricardo Oliva Alonso, Lea Rosema... and often in coding, the best resource is try-and-error: draw something and see what works best (then share it so we can see it!)

Collapse
tlylt profile image
Liu YongLiang

HAHA Sure! I will definitely share something before the end of this year!
(Saying it out so that I can't go back on my words 😉)