Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами

    Monster


    Те, кто интересуется версткой, frontend разработкой и веб-дизайном, вероятно заметили, что в последние несколько месяцев в сети все чаще стали появляться анимированные картинки, сделанные с помощью HTML и CSS. В этой статье я постараюсь рассказать откуда это веяние появилось, в чем фишка и почему это стало так популярно среди верстальщиков (а возможно кто-то еще не слышал, может быть интересно познакомиться с таким видом деятельности).


    Как все начиналось?


    В июне 2016 года мне написала Stela Seldano с предложением принять участие в своеобразном квесте. Идея была в том, что участники с помощью HTML и CSS должны сделать картинку пингвина и выложить ее на всеобщее обозрение, был рейтинг в виде морковок (что-то вроде лайков, только морковки), а после окончания квеста исходники открывались и можно было посмотреть кто как подошел к решению задачи. До этого момента подобные квесты мне не встречались, к тому же было много свободного времени и я решил попробовать. Процес оказался очень увлекательным. Если раньше я просто верстал более-менее одинаковые макеты сайтов, то тут все было иначе. Нужно было практически нарисовать этого пингвина используя различные возможности CSS. Он получился довольно неказистым, но привлек определенное внимание других разработчиков, они стали соревноваться — кто сделает лучше. Опыта создания таких картинок не было ни у кого, но дело сдвинулось. Потом были мыши, костры и даже танцующие кактусы.


    Camp Fire
    Костер на CodePen


    Поскольку участники квеста были активными пользователями codepen и twitter, они привлекли к теме создания картинок еще больше людей. Так появился квест Daily CSS Images, который на сегодняшний день набрал определеную популярность.


    Почему мы это делаем?


    Это, вероятно, самый часто задаваемый вопрос. Многие говорят, что это же проще сделать с помощью SVG в том же Adobe Illustrator, а потом анимировать на JavaScript. И самый популярный ответ на этот вопрос — мы делаем это, потому что можем. Это соревнование. Это игра. Это разминка для мозга. Это своеобразная форма искусства, которая не только приносит удовольствие в процессе работы, но и дает возможность развиваться, постоянно узнавать что-то новое.


    Узнаем что-то новое о CSS


    Вы когда-нибудь видели список всех свойств CSS? Их много. А какой процент из них вы используете в повседневной жизни/работе? А насколько вы пробовали их применять при работе над сложными (в плане дизайна, анимаций) интерфейсами? Если посмотреть на вопросы, которые задаются на тостере или StackOverflow, то можно заметить, что многие верстальщики имеют не такие уж и глубокие знания CSS. И это легко объяснить: в повседневной жизни большинство из нас просто не стремится узнать что-то новое — ведь все задачи решаются старыми и проверенными способами. Рисование с помощью CSS — это замечательная возможность познакомиться с теми областями языка, которые в повседневной жизни практически не востребованы, и в будущем, когда они вдруг понадобятся — у вас уже будет опыт их использования.


    Frank-Einstein's Monster
    Франк-Энштейн на CodePen


    Стоит отметить и скорость работы. Вы реже обращаетесь к документации, чтобы вспомнить какое-то редкое свойство, учитесь использовать сокращенные варианты записи различных свойств, а также собираете коллекцию готовых решений для каких-то сложных задач, которые часто отнимают много времени при верстке.


    Упрощаем разметку


    Вы не ослышались. Один из занятных моментов, связанных с данным видом деятельности, это создание чего-либо из одного элемента. Берется один div и на его основе делается сложная фигура. Наглядный пример — Yin-Yang:


    Yin-Yang
    Yin-Yang на CodePen


    Чем больше верстальщик узнает о CSS, тем мешьше необходимость в многочисленных контейнерах для элементов. Структура HTML в наших проектах становится проще, его легче читать и поддерживать.


    Делимся опытом


    Codepen предоставляет прекрасную возможность поделиться тем, что вы делаете, с окружающими. Это не только возможность смотреть, но и возможность учиться. Начинающий разработчик может посмотреть на код более опытного и перенять опыт использования чего-то необычного для него или просто посмотреть на пример использования тех или иных свойств CSS.


    image
    Монстр на CodePen


    К сожалению, в русскоязычном интернете такой подход пока не очень популярен, люди склонны читать книжки или смотреть видео, но стоит обратить внимание и на такой вариант обучения. Часто можно услышать мнение, что для изучения CSS нужно брать большой проект и разбираться в нем. Но это не всегда работает — большой проект -> много кода -> сложная система сборки, не очень дружелюбная к начинающим. В результате тратится слишком много усилий на то, чтобы понять устройство сложных инструментов, вместо того, чтобы изучать основы языка. Здесь получается иная ситуация — есть немного HTML, немного CSS, и понять, что за что отвечает, достаточно просто.


    Кому это может быть полезно?


    Начинающие верстальщики — Для начинающих верстальщиков создание картинок на CSS — это возможность в игровой форме изучать редкие (и не только редкие) свойства CSS.


    Не очень начинающие — почему бы не размять мозги, и не оторваться на пару часов от повседневных задач?


    HR — вам не надоели все эти стандартные тестовые задания (сверстайте todo-лист, сверстайте чат, сверстайте макет, который все уже ретвитили тысячу раз..)? Включите воображение — пусть ваш дизайнер нарисует какую-нибудь зверушку, а кандидат ее сверстает! Это проверит не только знания CSS, но и способность нестандартно мыслить. Да и в случае, если он вам не подойдет, у него останется интересная работа, которую не стыдно и в другом месте показать.


    Beaver with tie
    Бобер на CodePen


    Что посмотреть?


    CSS Quests — с этого все началось, сейчас там затишье, но многие надеются, что конкурсы вернутся
    Daily CSS Images
    Sasha на CodePen
    Она же снимает видео о том, как она делает эти картинки (для любителей смотреть видео). Это не уроки, но кому-то может быть интересно.

    Support the author
    Share post

    Similar posts

    Comments 22

      +7
      Такой же удручающе убогой была анимация во времена появления Flash. Только там было больше возможностей для действительно нормальной анимации без операции на гландах через задний проход. Инструменты надо использовать по прямому назначению, а не думать, что твой Minecraft подобен CAD.
        +4
        Чем себя занять долгими зимними вечерами

        Весна уже вроде, нет?

        • UFO just landed and posted this here
            0

            Это смотря где обитать! :)

              –4
              Моё 1 декабря 2015

              Будва, Черногория


              0
              Летом в июне на севере наблюдаю «закат». Солнце выходит в 4 часу утра по текущему часовому поясу (летнего времени сейчас нет). Пару-тройку дней назад начал снег подтаивать. Весна!
              +1
              image
              0
              Был где-то целый сайт (или раздел), на котором выложены большие, красивые изображения (вплоть до старого, хорошо детализированного, фотоаппарата), которые сделаны одним блоком.
                +3
                Да, вы верно заметили, был такой сайт — a.singlediv.com, правда там только один человек все это делал.
                +3
                HR — вам не надоели все эти стандартные тестовые задания (сверстайте todo-лист, сверстайте чат, сверстайте макет, который все уже ретвитили тысячу раз..)? Включите воображение — пусть ваш дизайнер нарисует какую-нибудь зверушку, а кандидат ее сверстает!

                Представляю себе радость кандидата от такого задания. Особенно если учитывать, что на работе ему всё равно придется верстать только те самые чаты, макеты, todo-list'ы.
                  0
                  ну да. часто вся верстка сводится к: {.some-class: width:..; heigth: ...; background-image:...;}
                  0
                  Рассказ о картинках, сделанных средствами CSS — иллюстрирован картинками в формате PNG. Это как понимать? И как научиться делать свои картинки на CSS?

                  Кстати, не могу найти ни одного толкового учебника по CSS и JS. То, что попадается — какая-то невнятная жвачка.

                  А ещё не могу найти толковой документации по LDAP — такое ощущение, что авторы текстов сами его вообще никогда не использовали, а просто переписали чужую документацию.
                    +1
                    Рассказ о картинках, сделанных средствами CSS — иллюстрирован картинками в формате PNG. Это как понимать?

                    Под каждой картинкой ссылка на CodePen, где находится полноценная песочница с исходниками.
                      0

                      "Большая книга CSS" — сам ещё не читал, но советовали и отзывы хорошие.

                        0
                        Новая большая книга CSS и Большая книга CSS, как порекомендовал jumkarto Вот насчет JS сам ищу что-то хорошее про современный JS, желательно на русском.
                          0

                          Для новичков обычно "Выразительный JavaScript" советуют.

                        +3
                        Как квест — очень занятно и интересно.

                        Но получается, что в боевом коде HTML становится проще, а CSS — сложнее. И сопровождать такие СSS затруднительно.
                          0
                          Но ничего не мешает вынести в папку «анимации». Но проблема скорее в размере кода css и во времени на его написание, если уже за боевой код пошла речь. Да и кроме того cpu скачет от одной анимации до 50%. Пару таких анимашек на одной странице, и уже твой браузер будет сам анимировать элементы, включая курсор
                            0
                            А мне в целом не понятен этот странный подход, когда есть SVG. Некоторые несложные вещи еще можно сделать в real-world проекте, наподобие кругов и прямоугольников, но все остальное…
                            Есть множество других, имхо, более интересных вещей для верстальщика за которыми можно скоротать вечера)
                            Например рост из верстальщика в полноценного фронтендщика путем познания необходимых путей :) К которым лично я, например, создание картинок из CSS не могу отнести. Слишком мало профессиональной пользы.
                            Но каждому хобби по вкусу!
                              +3
                              Воспринимайте это как олимпиадные задачки по CSS. Просто хорошая разминка для ума, но в реальном проекте, разумеется, не стоит такое делать.
                            0
                            Хм?
                            Там хотя бы есть ссылки на все дни «квеста», ну и вообще…
                            "… и я решил попробовать"
                              0
                              Поняла свою ошибку, сорре, думала, это что-то типа перевода той статьи.

                            Only users with full accounts can post comments. Log in, please.