Hi, everybody. I’ve got an idea to give the task to make something amusing as a test task for new employees when hiring. Something that won’t take a lot of time and even if the applicant doesn’t suit us for any reason he won’t be offended as he will have the work which isn’t a shame for showing to someone else. The task assumes to draw any animal by means of standard CSS. I liked the idea and I decided to try. It turned out to be really interesting and I performed several similar tasks.
The first thing that was made is the animated owl. When hovering over the owl, it is able to blink and flap its wings. We will dwell upon it.
The owl was separated into 2 parts – the head and the body
Let’s start with the head. I separated it as well (eyes, beak, ears)
All the elements are simple geometric figures that are positioned relative to each other, and their extra parts are hidden by overlapping other elements. As a result, an integral structure should be obtained.
Since there are hundreds of lines of styles, then I propose to analyze only a small part. The link to the entire code will be available in the end.
The head and the eyes are blocks that are simply given `border-radius` and there is nothing unusual in them.
The beak and the ears are made with the help of `clip-path`. It allows to draw on points as on a canvas.
As a result we get something like this:
As it was described above the owl is able to blink and flap wings. It is done by means of 3 animations – eyelids and one animation for each wing.
That’s all. We have analyzed the main points. The remaining parts are made by analogy and should not cause difficulties. See the full version of the code and a experiment on https://codepen.io
See the Pen
CSS OWL by Mikhail (@mikhail1992)
on CodePen.
For those who are interested in it there is the example of a Cat
See the Pen
CSS Cat by Mikhail (@mikhail1992)
on CodePen.
