Drawing Guy Fawkes mask in CSS

V for Vendetta — Guy Fawkes mask — Symbol of Anonymity

https://codepen.io/bigomega/full/jqgbXW/

Drawing in CSS in one of the most interesting things to do because the possibility in CSS is very much restricted. So you have to use your creativity and combine multiple small things to come up a great artwork. For a first look, the image above might look like a digital art, but it’s not. It’s made up meticulously structured 111 HTML elements (including pseudo ones) from 60 div tags.

It’s really hard to see how it’s been made possible by CSS. So I spend sometime creating a gif, that shows the element inclusion step-by-step. Also, I’ve used different colors with a transparency to see how they fit in. Each frame has about 3 to 10 elements and it covers only one of the symmetrical halves. It all started with a doodle, then some planning…

HTML layers — explained

I guess that gif is self-explanatory. Dig into the html to understand more.
If you like this, please recommend so it reaches others too :) Also do checkout my CSS Experiments page where I’ll be drawing more and more interesting stuff :)

For starters

I’d suggest you go through the basic shapes possible with CSS. Try to understand them and use your. Remember to utilize as much as :before and :after pseudo-tags as possible. It makes your tree structure look clean. Name them appropriately, “eye-left”, “lip” than “elem-1”, “foo”. Start with something small, and get the idea of this. Then let your creativity fly, even sky is not a limit. Here’s the structure for this mask.

.mask-container
 .mask-shadow
 .mask-base
 .eye-brow
 .pre-eye-brow-shadow-left
    .pre-eye-brow-shadow-right
    .pre-eye-brow-left
    .pre-eye-brow-right
    .eye-brow-left
    .eye-brow-right
  
  .bottom-shadow
    .eye-left-mascara
    .shadow-lvl-1
    .shadow-lvl-2
    .shadow-lvl-3
 
  .mouth
    .lip
    .lip-shadow
    .moustache-left
    .moustache-right
    .moustache-filler
    .beard-up
    .beard-down
  
  .cheek-left
  .dimple-left
  .eyes
    .eye-left
      .eye-left-inner
    
    .eye-brow-shadow-left
      .eye-left
        .eye-left-inner  
   
    .eye-brow-shadow-right-2
    .eye-brow-shadow-right
    .eye-right
      .eye-right-inner
  
  .dimple-right
  .nose
    .nose-left
    .nose-right
    .nose-middle