Mike Wazowski Faces In CSSView Project Online
Decided to have a little fun with Pure CSS drawings and to try some pixel perfect code with some weird shapes.
I had seen this image around and to start with something basic (and also something that would not eat up ALL my time), decided to go with the lovable character Mike Wazowski.
Most of the faces had the same overall shape and some same elements so started off with the overall head, ears, and eyes (including iris and eye reflection).
From there added mouths, tongue, etc.
The toughest one was the mustache and the second to last face. Took some creative thinking.
Go ahead an take a look at the code!
Added a hover state for the pen to see the original face.
- Experimentation with shapes
- All shapes and figures done with CSS (SASS/SCSS)
- As close as to pixel perfect as possible
I learnt a lot by experimenting with CSS shadows, radii, and transform.
Link to Pen with experiment and code: https://codepen.io/mae829/pen/YEwrqB