четверг, 9 марта 2017 г.

Как перестроить мышление через рисование с помощью CSS

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

Изображения на CSS строятся на основе простых форм: круги, прямоугольники, треугольники, обводки. Хотя flat (плоскую) графику можно легко сделать в любом векторном редакторе, но для меня работа в упрощенном стиле представляла определенную сложность до того момента, как я начала работать с CSS. После знакомства с Сашиной статьей о том, как она начала рисовать CSS Image, в моем сознании, наконец, сформировалась полная картина - я поняла, что могу рисовать плоскую графику в виде CSS правил.

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

Дополнительным стимулом является то, что подобной графикой занимаешься не в одиночестве, а можно приобщиться к "сообществу" единомышленников, показывающих свои результаты в твиттер под тегом #dailycssimages. Особенно мне запомнился вот этот автор Eva Lettner  с прекрасной ветряной мельницей. Одним словом, подталкиваешь себя к дальнейшему изучению возможностей верстки и более целостному раскрытию мира плоского дизайна.

Покажу мои работы. Для запуска показа нужно нажать Run и сдвинуть поля, как будет удобно для просмотра, или открыть отдельное окно по ссылке

1. Летящая ракета
2. Играющая кошка
3. Иконка Ингресс
4. Птичка и цветок на 8 марта