Creating images on CSS makes a maker-up better, or What to do during long winter evenings
Those who are interested in layout, frontend development and web design, probably noticed that in the past few months, animated images made with the help of HTML and CSS have increasingly appeared on the web. In this article I will try to tell where this trend came from, what the chip is and why it has become so popular among the maker-ups (and maybe someone else has not heard, it may be interesting to get acquainted with this type of activity).
How it all began?
In June 2016, I wrote to Stela Seldano with an offer to take part in a kind of quest. The idea was that participants using HTML and CSS should make a picture of a penguin and put it on public display, there was a rating in the form of carrots (something like likes, only carrots), and after the end of the quest the source was opened and you could see how came to the solution of the problem. Up to this point I have not met similar quests, besides there was a lot of free time and I decided to try. The process was very exciting. If earlier I just installed more or less identical site layouts, then everything was different. It was necessary to practically draw this penguin using various CSS features. It turned out rather inconspicuous, but attracted a certain attention of other developers, they began to compete - who will do better. Nobody had the experience of creating such pictures, but the matter shifted. Then there were mice , fires and even dancing cacti .
Since the quest participants were active users of codepen and twitter, they attracted even more people to the topic of creating pictures. This is how the Daily CSS Images quest, which has gained a certain popularity today.
Why do we do this?
This is probably the most frequently asked question. Many people say that it’s easier to do it using SVG in the same Adobe Illustrator, and then animate in JavaScript. And the most popular answer to this question is we do it because we can. This is a competition. This is a game. This is a warm-up for the brain. This is a peculiar form of art, which not only brings pleasure in the process of work, but also provides an opportunity to develop, to constantly learn something new.
We learn something new about CSS
Have you ever seen a list of all CSS properties? A lot of them. And what percentage of them do you use in your daily life / work? And how much did you try to use them when working on complex (in terms of design, animations) interfaces? If you look at the questions that are asked on a toaster or StackOverflow, then you will notice that many web designers have not so deep knowledge of CSS. And this is easy to explain: in everyday life, most of us simply do not want to learn something new - after all, all problems are solved in the old and proven ways. Drawing with CSS is a great opportunity to get acquainted with those areas of the language that are practically not in demand in everyday life, and in the future, when they are suddenly needed, you will already have experience using them.
It is worth noting the speed of work. You rarely refer to the documentation to recall some rare property, learn to use abbreviated recording options for various properties, and also collect a collection of ready-made solutions for some complex tasks that often take a lot of time during layout.
Simplify the markup
You heard right. One of the interesting moments associated with this type of activity is the creation of something from one element. One div is taken and on its basis a complex figure is made. A good example is Yin-Yang:
The more the template designer learns about CSS, the smaller the need for multiple element containers. The HTML structure in our projects becomes simpler, easier to read and maintain.
Share experience
Codepen provides an excellent opportunity to share what you do with others. This is not only an opportunity to watch, but also an opportunity to learn. A novice developer can look at the code of a more experienced one and learn from the experience of using something unusual for him or simply look at an example of using certain CSS properties.
Unfortunately, this approach is not yet very popular on the Russian-language Internet, people tend to read books or watch videos, but you should also pay attention to this training option. You can often hear the opinion that to study CSS you need to take a big project and understand it. But this does not always work - a big project -> a lot of code -> a complex build system, not very friendly to beginners. As a result, too much effort is spent on understanding the structure of complex tools, instead of learning the basics of the language. There is a different situation here - there is a bit of HTML, a bit of CSS, and to understand what is responsible for what is quite simple.
Who can this be useful?
Beginner typesetters - For beginner typesetters, creating images on CSS is an opportunity to study rare (and not only rare) CSS properties in game form.
Not very beginners - why not stretch our brains, and not to break away from everyday tasks for a couple of hours?
HR - aren't you tired of all these standard test tasks (roll out a todo list, roll out a chat, roll out a mockup that everyone has already retweeted a thousand times ..)? Turn on the imagination - let your designer draw some animal and the candidate will impose it ! This will test not only the knowledge of CSS, but also the ability to think outside the box. And if he does not suit you, he will have an interesting job, which is not a shame to show in another place.
What to see?
→ CSS Quests - it all started, now there is a lull, but many hope that the contests will return
→ Daily CSS Images
→ Sasha on CodePen
→ She also shoots a video about how she makes these pictures (for fans to watch the video). These are not lessons, but someone might be interested.
')
Source: https://habr.com/ru/post/323086/
All Articles