Drawing a giraffe with CSS
Yesterday, I did a quick cartoon of a giraffe using HTML and CSS:
The process went like this:
- Drew the snout by doing an ellipse and adding some rotation.
- The head is a rotated oval.
- A pseudo-element of the snout made a circle for the nose, and added some shadows to duplicate it.
- For the mouth, we used another pseudo-element of the snout, we made it into an ellipse and use the bottom border for the line.
- The eyes are a rounded pseudo-element of the head and its shadow.
- Then for the hair, another pseudo-element of the head shaped like an ellipse and with an inset box-shadow.
- Both ears are a single element and its
::afterby making them squares with opposite rounded corners.
- The horns were placed behind the head but in a position that makes them look like one is on top and the other one behind.
- A really tall rectangle made the neck.
- A similar rectangle made the mane, with a small rotation and cropping small triangles to make it irregular.
- Finally, for the dots in the neck, we use a neck pseudo-element and a bunch of box-shadows :)
Here there is a time-lapse video of the process: