How To Draw Guy Fawkes Mask

Drawing Guy Fawkes mask in CSS

5 for Vendetta — Guy Fawkes mask — Symbol of Anonymity

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

Drawing in CSS in one of the almost interesting things to do considering the possibility in CSS is very much restricted. Then you take to utilise your inventiveness and combine multiple small-scale things to come up a dandy artwork. For a beginning look, the image above might look like a digital art, simply it's non. Information technology'south made up meticulously structured 111 HTML elements (including pseudo ones) from 60 div tags.

Information technology's really hard to encounter how it's been made possible past 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 but one of the symmetrical halves. It all started with a doodle, so some planning…

I approximate that gif is self-explanatory. Dig into the html to empathise more.
If you like this, delight recommend and then it reaches others also :) Also practise checkout my CSS Experiments page where I'll be drawing more and more interesting stuff :)

For starters

I'd suggest you go through the bones shapes possible with CSS. Try to empathise them and utilise your. Remember to utilize every bit much every bit :before and :later pseudo-tags as possible. It makes your tree structure look clean. Proper name them accordingly, "center-left", "lip" than "elem-one", "foo". Start with something small, and get the idea of this. So let your creativity wing, fifty-fifty sky is not a limit. Here'south the construction for this mask.

          .mask-container
            .mask-shadow
            .mask-base
            .eye-brow
            .pre-center-brow-shadow-left
            .pre-eye-forehead-shadow-right
            .pre-eye-forehead-left
            .pre-eye-brow-correct
            .eye-brow-left
            .middle-brow-correct                .bottom-shadow
              .eye-left-mascara
              .shadow-lvl-i
              .shadow-lvl-2
              .shadow-lvl-three
                            .mouth
              .lip
              .lip-shadow
              .moustache-left
              .moustache-right
              .moustache-filler
              .beard-up
              .beard-down
                            .cheek-left
              .dimple-left
              .optics
              .eye-left
              .center-left-inner
                              .eye-brow-shadow-left
              .middle-left
              .middle-left-inner            
                              .eye-brow-shadow-right-2
              .centre-forehead-shadow-right
              .centre-right
              .eye-right-inner
                            .dimple-correct
              .nose
              .nose-left
              .nose-right
              .nose-centre