March 2, 2017 at 16:30Creating CSS images makes the layout designer better, or What to do with yourself on long winter evenings
Those interested in layout, frontend development and web design have probably noticed that over the past few months, animated images made using HTML and CSS have begun to appear more and more on the web. In this article I will try to tell you where this trend came from, what the trick is and why it has become so popular among layout designers (and maybe someone has not heard, it may be interesting to get acquainted with this type of activity).
How it all began?
In June 2016, Stela Seldano wrote to me with an offer to take part in a kind of quest. The idea was that the participants using HTML and CSS should make a picture of the 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 sources opened and you could see who how he approached the solution of the problem. Until this moment, such quests I have not met, besides there was a lot of free time and I decided to try. The process turned out to be very exciting. If earlier I just made up more or less the same site layouts, then everything was different. It was necessary to practically draw this penguin using various CSS features. It turned out pretty ugly, but attracted some attention from other developers, they began to compete - who will do better. No one had an attempt to create such pictures, but things moved forward. Then there weremice , bonfires, 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. So the quest Daily CSS Images appeared, which today has gained some popularity.
Why are we doing this?
This is probably the most frequently asked question. Many say that it’s easier to do this using SVG in the same Adobe Illustrator, and then animate it in JavaScript. And the most popular answer to this question is that we do it because we can. This is a competition. This is a game. This is a workout for the brain. This is a peculiar form of art, which not only brings pleasure in the process of work, but also makes it possible to develop and constantly learn something new.
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 everyday life / work? And how much have you tried to apply them when working on complex (in terms of design, animations) interfaces? If you look at the questions that are asked on the toaster or StackOverflow, you will notice that many typesetters do not have such deep knowledge of CSS. And this is easy to explain: in everyday life, most of us simply do not seek to learn something new - after all, all tasks are solved in old and proven ways. Drawing with CSS is a great opportunity to get acquainted with those areas of the language that are practically not needed in everyday life, and in the future, when you suddenly need them, you will already have experience in using them.
It is worth noting the speed of work. You rarely turn to documentation to recall a rare property, learn to use shorthand 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 to typeset.
Simplify the markup
You heard right. One of the interesting moments associated with this type of activity is the creation of one of one element. One div is taken and a complex figure is made on its basis. A good example is Yin-Yang:
The more the layout designer learns about CSS, the smaller the need for multiple element containers. The HTML structure in our projects is becoming simpler, easier to read and maintain.
Sharing experience
Codepen provides a great 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 more experienced code and learn from the experience of using something unusual for him, or just look at an example of using certain CSS properties.
Unfortunately, this approach is not very popular on the Russian-speaking Internet, people tend to read books or watch videos, but you should pay attention to this option of training. You can often hear the opinion that to learn CSS you need to take a large project and understand it. But this does not always work - a large project -> a lot of code -> a complex build system, not very friendly to beginners. As a result, too much effort is spent to understand the structure of complex tools, instead of learning the basics of the language. This turns out to be a different situation - there is a bit of HTML, a little CSS, and understanding what is responsible for is quite simple.
Who can benefit from this?
Beginner typesetters - For beginner typesetters, creating images in CSS is an opportunity to learn in a playful way the rare (and not only rare) properties of CSS.
Not very beginners - why not stretch your brains, and not break away for a couple of hours from everyday tasks?
HR - you are not tired of all these standard test tasks (make up a todo-list, make up a chat, make up a layout that everyone has already retweeted a thousand times ..)? Turn on the imagination - let your designer draw some little animal, and the candidate makes it up ! This will test not only CSS knowledge, but also the ability to think outside the box. And in the event that he does not suit you, he will have an interesting work that is not a shame to show elsewhere.
What to see?
→ CSS Quests - it all started, now there’s a lull, but many hope that the competitions will return
→ Daily CSS Images
→ Sasha on CodePen
→ She also shoots a video about how she makes these pictures (for fans to watch videos). These are not lessons, but someone may be interested.