От автора: например, вы видели необычный проект Линн Фишер Единственный div? Мало того, что вся эта графика рисуется только в HTML и CSS, вся она (как вы уже догадались) создана с помощью одного div.
Зачем ей делать с помощью CSS рисунки? Вот один из вариантов ответа: это не наше дело. Мы можем быть заинтересованы или даже спросить ее — только сделав это уважительно. Но действительно ли это имеет значение? Давайте перестанем предполагать, что она не знает, что делает, что это какое-то болезненное удовольствие или что она не владеет другими технологиями. Посмотрите пример, в котором она нарисовала официальный логотип SVG с помощью CSS и одного div. Круто.
Я даже завидую ей. Я написал целую книгу о SVG, потому что я думаю, что это огромная тема. Существуют ли «CSS-рисунки», которые, по моему мнению, подходили бы больше для реального сайта, чем SVG? Конечно. Как насчет этого?
Jeepers creepers that’s something else. Так на вскидку, я бы предположил, что это работа GreenSock. К слову о GreenSock, здесь на CSS-Tricks вы найдете некоторые методы продвинутой анимации. Частично они связаны с разбивкой анимации на части и сведения их вместе в более крупных таймлайнах для удобства обслуживания и чтобы «не увязнуть в этом процессе».
Так Юлия Музафарова сделала это неправильно? Конечно нет. Если в этом мире есть неправильный способ создать анимацию хипстера на велосипеде, я больше не хочу жить в этом мире. Это 2100 строк тщательного позиционирования, раскраски и анимации. Черт, это будет работать в некоторых почтовых клиентах, если вам действительно так уж нужно что-то «практическое».
Саша Тран, разработчик пользовательского интерфейса из студии Level, в прошлом году поделилась своей историей создания рисунков в CSS. В течение 20 дней во время Codevember она делала что-то новое каждый день.
Даже если у меня нет таланта иллюстратора, есть способ выразить себя через другие среды. Я нашла эту возможность в HTML и CSS. Чтобы развиться и дойти до точки, где я могла бы создавать красивые графические работы, я сосредоточилась на двух вещах: основах и последовательности. Работа с базовыми формами CSS, такими как прямоугольники, и базовыми свойствами, такими как border-radius, дала мне мышечную память, чтобы перейти к более сложным иллюстрациям.
Она значительно подняла свой уровень за месяц и развила мышечную память в CSS. К стати. Говоря о фигурах, существует множество способов сделать что-то интересное с помощью CSS!
Вы могли бы возразить, что сдвигать границы это непрактично — но это то, что оттачивает наши навыки для другой, вот такой, работы.
Вы можете утверждать, что искусственное ограничение себя является источником для вдохновения.
Вы можете сказать, что напрягать свой мозг, стараясь придумать что-то подобное помогает завоевать себе авторитет и расширить набор инструментов.
А это вы можете делать просто для удовольствия:
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.