Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами / Хабр
Те, кто интересуется версткой, frontend разработкой и веб-дизайном, вероятно заметили, что в последние несколько месяцев в сети все чаще стали появляться анимированные картинки, сделанные с помощью HTML и CSS. В этой статье я постараюсь рассказать откуда это веяние появилось, в чем фишка и почему это стало так популярно среди верстальщиков (а возможно кто-то еще не слышал, может быть интересно познакомиться с таким видом деятельности).
Как все начиналось?
В июне 2016 года мне написала Stela Seldano с предложением принять участие в своеобразном квесте. Идея была в том, что участники с помощью HTML и CSS должны сделать картинку пингвина и выложить ее на всеобщее обозрение, был рейтинг в виде морковок (что-то вроде лайков, только морковки), а после окончания квеста исходники открывались и можно было посмотреть кто как подошел к решению задачи. До этого момента подобные квесты мне не встречались, к тому же было много свободного времени и я решил попробовать.
Процес оказался очень увлекательным. Если раньше я просто верстал более-менее одинаковые макеты сайтов, то тут все было иначе. Нужно было практически нарисовать этого пингвина используя различные возможности CSS. Он получился довольно неказистым, но привлек определенное внимание других разработчиков, они стали соревноваться — кто сделает лучше. Опыта создания таких картинок не было ни у кого, но дело сдвинулось. Потом были мыши, костры и даже танцующие кактусы.
Костер на CodePen
Поскольку участники квеста были активными пользователями codepen и twitter, они привлекли к теме создания картинок еще больше людей. Так появился квест Daily CSS Images, который на сегодняшний день набрал определеную популярность.
Почему мы это делаем?
Это, вероятно, самый часто задаваемый вопрос. Многие говорят, что это же проще сделать с помощью SVG в том же Adobe Illustrator, а потом анимировать на JavaScript. И самый популярный ответ на этот вопрос — мы делаем это, потому что можем.
Это соревнование. Это игра. Это разминка для мозга. Это своеобразная форма искусства, которая не только приносит удовольствие в процессе работы, но и дает возможность развиваться, постоянно узнавать что-то новое.
Узнаем что-то новое о CSS
Вы когда-нибудь видели список всех свойств CSS? Их много. А какой процент из них вы используете в повседневной жизни/работе? А насколько вы пробовали их применять при работе над сложными (в плане дизайна, анимаций) интерфейсами? Если посмотреть на вопросы, которые задаются на тостере или StackOverflow, то можно заметить, что многие верстальщики имеют не такие уж и глубокие знания CSS. И это легко объяснить: в повседневной жизни большинство из нас просто не стремится узнать что-то новое — ведь все задачи решаются старыми и проверенными способами. Рисование с помощью CSS — это замечательная возможность познакомиться с теми областями языка, которые в повседневной жизни практически не востребованы, и в будущем, когда они вдруг понадобятся — у вас уже будет опыт их использования.
Франк-Энштейн на CodePen
Стоит отметить и скорость работы. Вы реже обращаетесь к документации, чтобы вспомнить какое-то редкое свойство, учитесь использовать сокращенные варианты записи различных свойств, а также собираете коллекцию готовых решений для каких-то сложных задач, которые часто отнимают много времени при верстке.
Упрощаем разметку
Вы не ослышались. Один из занятных моментов, связанных с данным видом деятельности, это создание чего-либо из одного элемента. Берется один div и на его основе делается сложная фигура. Наглядный пример — Yin-Yang:
Yin-Yang на CodePen
Чем больше верстальщик узнает о CSS, тем мешьше необходимость в многочисленных контейнерах для элементов. Структура HTML в наших проектах становится проще, его легче читать и поддерживать.
Делимся опытом
Codepen предоставляет прекрасную возможность поделиться тем, что вы делаете, с окружающими. Это не только возможность смотреть, но и возможность учиться.
Начинающий разработчик может посмотреть на код более опытного и перенять опыт использования чего-то необычного для него или просто посмотреть на пример использования тех или иных свойств CSS.
Монстр на CodePen
К сожалению, в русскоязычном интернете такой подход пока не очень популярен, люди склонны читать книжки или смотреть видео, но стоит обратить внимание и на такой вариант обучения. Часто можно услышать мнение, что для изучения CSS нужно брать большой проект и разбираться в нем. Но это не всегда работает — большой проект -> много кода -> сложная система сборки, не очень дружелюбная к начинающим. В результате тратится слишком много усилий на то, чтобы понять устройство сложных инструментов, вместо того, чтобы изучать основы языка. Здесь получается иная ситуация — есть немного HTML, немного CSS, и понять, что за что отвечает, достаточно просто.
Кому это может быть полезно?
Начинающие верстальщики — Для начинающих верстальщиков создание картинок на CSS — это возможность в игровой форме изучать редкие (и не только редкие) свойства CSS.
Не очень начинающие — почему бы не размять мозги, и не оторваться на пару часов от повседневных задач?
HR — вам не надоели все эти стандартные тестовые задания (сверстайте todo-лист, сверстайте чат, сверстайте макет, который все уже ретвитили тысячу раз..)? Включите воображение — пусть ваш дизайнер нарисует какую-нибудь зверушку, а кандидат ее сверстает! Это проверит не только знания CSS, но и способность нестандартно мыслить. Да и в случае, если он вам не подойдет, у него останется интересная работа, которую не стыдно и в другом месте показать.
Бобер на CodePen
Что посмотреть?
→ CSS Quests — с этого все началось, сейчас там затишье, но многие надеются, что конкурсы вернутся
→ Daily CSS Images
→ Sasha на CodePen
→ Она же снимает видео о том, как она делает эти картинки (для любителей смотреть видео). Это не уроки, но кому-то может быть интересно.
Как рисование на чистом CSS помогло мне понять React-компоненты — CSS-LIVE
Перевод статьи How Pure CSS Images Helped Me Understand React Components с сайта medium.
com для CSS-live.ru, автор — Майкл Манджаларди
В начале 2016-го я так устал от попыток выучить React, что едва не бросил разработку. Я стал жертвой синдрома самозванца. Теперь я работаю React-разработчиком на полную ставку и успел написать книгу «Изучение React.js для визуалов»
Как же я преодолел синдром самозванца и наконец освоил React? Причин несколько, но важнее всего оказалось то, что я научился делать рисунки на чистом CSS.
В трясине синдрома самозванца
В декабре 2015-го я получил диплом по компьютерным наукам и еще не знал толком, что бы такое выбрать для себя из мира разработки. Наслушавшись деловых подкастов, я был зачарован свежим ароматом стартапов, доходы которых буквально рекой лились за счет создания веб-приложений. Вот почему я в итоге поставил себе цель стать веб-разработчиком.
Исследуя современную веб-разработку, я понял, что она в корне отличается от того, чему меня учили в вузе. В моих ограниченных знаниях HTML, CSS, JavaScript и PHP не было ничего похожего на все эти JavaScript-фреймворки, о которых все кругом говорили.
Вот воображаемая беседа со мной самим, точно отражающая те проблемы, с которыми я столкнулся в этой гонке:
Онлайн-ресурсы: Реакт — то, на чем вам стоит сосредоточиться для создания интерфейсов современных веб-приложений.
Я: Звучит круто! Что мне нужно, чтобы начать новый проект на Реакте?
Онлайн-ресурсы: Ага. Мы можем инициализировать наш проект с помощью npm. Потом нам надо поставить и настроить Webpack и Babel, чтобы можно было писать на ES6, а не на ES5. Теперь ставим React и ReactDOM, и можно начинать кодить на Реакте.
Я: Хм. Что за ES6? Почему нам нужны и Webpack, и Babel? И еще, React и ReactDOM, чтобы пользоваться Реактом? Это что, опечатка?
Онлайн-ресурсы: ES6 — это более новая версия ECMAScript. Она не очень хорошо реализована в браузерах, но в ней есть для нас крутые фичи.
Babel обрабатывает ES6-код и делает его совместимым с браузерами, поддерживающими ES5. Webpack можно использовать, чтобы собрать бандл из нашего кода и применить Babel. React — это одна библиотека, но нужно подключить еще и библиотеку ReactDOM, чтобы всё заработало.
Я: ECMAScript? Я думал, мы говорим про JavaScript. И еще понять бы, что значит «собрать бандл». Знаете… похоже, надо проделать немалую работу, чтобы просто начать. В чем же тогда прок от Реакта?
Онлайн-ресурсы: Можно собирать интерфейсы из компонентов, инкапсулирующих JSX и данные. Он по-настоящему модульный.
Я: JSX?
Онлайн-ресурсы: Ага, это просто JavaScript-синтаксис для определения того, в виде чего ваш компонент в конце концов отобразится. Почти как HTML… только надо писать className вместо class.
Я: Это логично, вроде как. Ну что ж, продолжим.
Онлайн-ресурсы: Чудненько.
Давайте-ка для начала я покажу вам код для компонента «Hello World».
Я: На первый взгляд жутковато, но эти компоненты кажутся крутой штукой. В смысле, этот компонент «Hello World» весьма неплох.
Онлайн-ресурсы: Здорово! Вижу, вас немного смутило создание нового Реакт-проекта. Не волнуйтесь. На Гитхабе есть великолепный набор для начинающих, в котором уже есть и Webpack, и Babel, и сервер разработки для Webpack. Клонируйте его себе, смелее.
Я: Ух. Понятия не имею, что делает половина этого кода. Но вот эти компоненты выглядят знакомыми. С базовыми компонентами понятно, но почему в них вложены свои компоненты, а в те — еще какие-то?
Онлайн-ресурсы: О! Это лишь потому, что представление интерфейса можно разбить на родительские и дочерние компоненты. Тогда можно передавать данные от одних к другим.
Я: Но далеко не просто родитель и ребенок! Там, похоже, пра-пра-прадеды с пра-пра-правнуками и всеми промежуточными поколениями.
Что там творится?
Я: Знаете что… не надо на это отвечать. Реакт так популярен, значит, он должен быть простым. Видимо, я просто тупой, раз задаю столько вопросов. Точно, не гожусь я в разработчики. Нечего мне и пытаться выучить современную веб-разработку.
Смысл этой воображаемой беседы — подчеркнуть препятствия, через которые доводится пробиваться новичку в Реакте. В частности, одна из главных трудностей — вникнуть в понятие компонентов. К сожалению, есть от чего устать еще до того, как вы до них доберетесь. В этот момент очень нужно предельно практичное объяснение, а не очередная порция модных словечек.
Я глубоко уверен, что случайно открыл замечательный способ объяснять React-компоненты, повозившись с рисованием на чистом CSS.
Это просто отличная история. Сходите за любимым напитком, если желаете.
Как я открыл рисунки на чистом CSS
Пока я пытался освоить Реакт, я устроился на работу специалистом IT-поддержки.
С первого же дня, когда мне пришлось вкручивать лампочки на третьем этаже, я с трудом мог высидеть до конца рабочего дня.
Однажды мне нужно было сделать объявление о сломанном принтере, или о сломанной двери (знаете, ведь «айтишник» и завхоз — это же одно и то же). Я наткнулся на векторный редактор под названием Inkscape, в котором и нарисовал объявление. Я прежде не имел дела с векторной графикой, но мне очень понравилось создавать фигуры, манипулировать ими и раскрашивать, чтобы получить итоговый рисунок.
Чтобы сбросить накопившееся раздражение от суровых будней «айтишника», я решил часок поиграть с Inkscape в обед. Со временем я открыл для себя Dribbble (способ показать и рассказать для дизайнеров) и Affinity Designer (как Inkscape, только намного лучше), которые подстегнули меня еще плотнее заняться векторной графикой.
Чем больше я практиковался в векторной графике, тем больше я осознавал, что ключ к успеху — посмотреть на итоговый рисунок, разбить его на меньшие фигуры, создать эти фигуры и раскрасить в удачные цвета.
У меня стало действительно хорошо получаться. С этой новообретенной уверенностью я решился на еще один подход к веб-разработке.
Еще до того, как влипнуть в Реакт, я наткнулся на Codepen и полюбил его, поскольку он был как Dribble для фронтендеров. Я по-прежнему заглядывал на его главную страницу ради всех тех крутых штук, что люди там создавали. В числе таких штук мое внимание привлекли картинки на чистом CSS. Я подумал: «Ух! Это же как моя векторная графика, но вместо Affinity Designer у них CSS!»
В конце концов я научился делать картинки на чистом CSS и здорово набил руку в этом.
Сцена из игры Zelda: A Link to the Past на чистом CSS
Процесс работы был точно таким же, как и с векторной графикой.
- Либо рассматриваю существующий рисунок, который хочу воссоздать, либо представляю себе итоговый рисунок в уме, используя Dribble для вдохновения.
- Разбиваю этот рисунок на небольшие компоненты, которые нужно создать.
- Создаю эти компоненты с помощью CSS и помещаю в нужные места.
- Подбираю цвета с помощью Dribbble, Coolors и/или Colorzilla
Шаг 2 из этого списка оказался самым трудным. По мере того, как я брался за всё более сложные рисунки, я всё больше понимал, что мне нужно лучшее определение для компонентов, которое объясняло бы их иерархию.
Понимание иерархии компонентов
Что я имел в виду под объяснением иерархии компонентов в чисто CSSном рисунке? Что ж, посмотрим на пример.
Взгляните на мой векторный рисунок с коалой:
Если я теперь спрошу у вас, из каких компонентов состоит этот коала, я предполагаю, что вы дадите один из двух ответов.
С одной стороны, можно сказать, что компоненты коалы — это уши, глаза, нос, голова и шерсть.
С другой стороны, можно еще сильнее углубиться в детали и сказать, что компоненты коалы — 3 светло-серых кружка, 2 тёмно-серых кружка, 2 белых кружка, 2 тёмно-синих кружка, коричневый скругленный прямоугольник и два светло-серых треугольника.
Оба ответа нельзя назвать неправильными. Первое объяснение более широкое и обобщенное, второе же очень точное и конкретное.
Этот пример был призван показать, что в описании компонентов рисунков на чистом CSS присутствует иерархия.
В более сложном CSS-рисунке, типа показанного ниже подземелья из «Зельды», в иерархии компонентов будет еще больше уровней.
Хотя CSS-рисунки могут казаться невероятно трудными, это можно изрядно облегчить, если рассмотреть картинку, которую вы хотите создать, и разбить ее вплоть до наименьших элементов, а затем выстроить из них иерархию компонентов.
Если взять предыдущего коалу как пример, можно разбить его на отдельные фигуры, а затем объединить некоторые из этих фигур в более сложные части его тела (в нашем случае, глаз и ухо).
Отдельные фигуры — самый нижний уровень иерархии компонентов, а следующий уровень — части тела коалы, некоторые из которых содержат несколько фигур.
Если собрать части тела вместе, у вас получится итоговая картинка с коалой.
Короче говоря, способность выделять из желаемой итоговой картинки упорядоченную иерархию компонентов здорово упрощает процесс. Я могу начать с нижнего уровня иерархии компонентов и выстраивать работу снизу вверх. Можно будет собирать итоговую картинку элемент за элементом.
Когда после этого я снова взялся учить Реакт, преимущества компонентности Реакта стали абсолютно логичными. Но объяснения иерархии/структуры компонентов показались мне крайне непрактичными (хотя я уже и понимал, к чему они пытаются подвести).
Поэтому я придумал способ объяснения иерархии Реакт-компонентов, который я называю «проектирование поселка на Реакте»
Проектирование поселка на Реакте
Я буду сравнивать иерархию компонентов в Реакт-приложении с иерархией поселка/городка.
В иерархии поселка 4 главных уровня иерархии (от общего к частному):
- Поселок
- Районы
- Кварталы
ЖилыеДома
Поселок
Начнем с поселка, как с самого очевидного.
Поселок — это эквивалент целого представления, например, главной страницы
Это самая общая часть иерархии поселка. А что, если я сейчас спрошу вас, из каких компонентов поселок состоит?
Как и в случае с нашим коалой, описать это можно разными способами.
Дома
Начнем с самого конкретного уровня (нижнего уровня в иерархии). На самом базовом уровне можно сказать, что поселок — это коллекция домов. Дома — это строительные блоки поселка.
Подобным образом можно описывать строительные блоки представления с помощью «домов». Дальше дробить их невозможно.
В нашем примере с коалой, тёмно-серый кружок — это «дом».
В примере с главной страницей Airtable внизу заголовок, абзац, кнопка подписки — примеры «домов», в сумме составляющих представление.
Кварталы
На следующем уровне иерархии поселка у нас кварталы.
Кварталы — это коллекции домов. Так что в широком смысле можно сказать, что поселок — это коллекция кварталов.
В примере с коалой можно сказать, что глаза — это пример «кварталов»:
«Квартал» глаза
Глаза — следующий уровень над «домами», он включает белый кружок и темно-синий кружок. Хотя мы можем отнести глаза к «кварталам», сами по себе они не образуют итоговой картинки.
«Кварталы» в интерфейсе — это коллекции «домов», которые вместе составляют определенную функциональность или вместе служат определенной цели в представлении. Однако, как и глаза у коала, они не действуют самостоятельно.
Например, следующие заголовок, абзац, форма ввода и кнопка на главной странице Airtable вместе служат для того, чтобы пользователь мог подписаться.
По этой причине их можно назвать «кварталом», состоящим из отдельных «домов». Или разделом подписки, состоящим из заголовка, абзаца, формы ввода и кнопки.
Аналогично, самостоятельным представлением он выступать не может.
Районы
Можно подняться еще на уровень в нашей иерархии поселка и описать его как коллекцию районов.
Район — это коллекция кварталов. В терминах интерфейса, я предпочитаю думать о «районах» как о разделах интерфейса.
Например, вот «шапка» главной страницы Airtable, представляющая собой «район»:
Район «шапки» — коллекция из трех «кварталов». Сверху в ней панель навигации. Затем идет видео и узор вокруг него, образующие еще один «квартал» слева. А справа «квартал» подписки, который мы только что описали. Эти «кварталы» составляют раздел шапки, или, повторюсь, район «шапки». Все «кварталы» в этом «районе» можно разбить дальше на отдельные «дома» (скажем, кнопку «Подписаться»).
Давайте пройдемся по сайту Airtable от самого верха и выделим разные районы.
Наверху у нас район Шапка:
Дальше у нас район с разделом контента.
Назовем его Раздел контента А:
«Район» раздела контента А
Есть еще один район с разделом контента, который можно назвать Раздел контента Б:
«Район» раздела контента Б
Дальше у нас район для отзывов, который можно назвать Раздел контента В:
«Район» раздела контента В
За ним идет еще один район, который можно назвать Раздел контента Г:
Раздел контента Г
Примечание: я подсветил рисунок вверху зеленым, чтобы было видно, что это раздел, хотя в нем всего один «квартал», который мы описали ранее как «квартал» подписки.
И наконец, район Подвал:
«Район» подвала
Если собрать все эти районы вместе, получится поселок (или, в нашем случае, представление).
Как только вы разбили интерфейс на составляющие, можно создавать Реакт-компоненты по одному. Как я обнаружил в случае CSS-рисунков, это здорово упрощает то, что кажется слишком уж сложным, если смотреть на всю картину с высоты.
Немного мыслей в заключение
Я признаю, что «Проектирование поселка на Реакте» не всегда бывает идеальной аналогией. Но я думаю, что это помогает донести идею, что с помощью Реакта можно создавать интерфейсы, состоящие из представлений с иерархией компонентов. Как в рисунках на чистом CSS, крайне важно уметь творить большое по частям. И с этим Реакт справляется блестяще.
Надеюсь, вы станете лучше понимать Реакт-компоненты и пользу от них.
Как я намекнул раньше, есть множество причин, почему Реакт может с трудом даваться новичку. Если вам понравилась эта заметка, вам наверняка понравится и моя электронная книга под названием «Изучение React.js для визуалов».
Изучение React.js для визуалов
В этой книге я объясняю самые основы React.js через принципы разработки, наглядные примеры и сверхпрактичные методологии обучения вроде той, что я применил в этой заметке.
Можете читать ее бесплатно или поддержать меня материально, чтобы я мог создавать больше контента.
С наилучшими пожеланиями,
Майк Манджаларди,
основатель сайта Coding Artist
P.S. Это тоже может быть интересно:
рисунков CSS, 50 отличных примеров
Как сказано в Википедии, каскадные таблицы стилей (CSS) — это язык таблиц стилей, используемый для описания семантики представления (то есть внешнего вида и форматирования) документа, написанного на языке разметки. Его наиболее распространенное применение — стилизация веб-страниц, написанных на HTML и XHTML, но этот язык также можно применять к любому XML-документу, включая SVG и XUL. Но помимо веб-дизайна вы можете использовать CSS для создания довольно классной графики, как показано ниже. Откройте для себя этот пакет из более чем 100 чрезвычайно изящных анимированных значков интерфейса, разработанных с учетом максимальной совместимости и доставляющих файлы в форматах SVG, Illustrator (ai), After Effects (aep), JSON, HTML и XML.
1. 3D CSS-головоломка Стью Николлса
Эта головоломка была сделана полностью с помощью CSS, что, должно быть, заняло много времени.
2. Гомер CSS от Романа Кортеса
Этот парень знал о скрытом потенциале внутри CSS и использовал его для рисования простого, но милого персонажа из всех.
3. Drawing the Line by Stu Nicholls
Простой карандаш, рисующий горизонтальную линию.
4. «Снеговик» Стью Николлса
Новогоднее поздравление можно сделать в CSS, очень просто.
5. Баннер, усыпанный звездами
Красивый американский флаг, версия CSS.
6. iPod с CSS3
Реалистичный iPod, сделанный с помощью CSS3, с очень классной графикой.
7. Иконки социальных сетей CSS от Николаса Галлахера.
8. CSS3 Raindrop от Шона Мартелла
Эта капля дождя просто потрясающая. Должно быть, нужно много терпения, чтобы сделать это.
9. Логотип Opera с помощью CSS от Давида де Сандро
Это все CSS, для создания этого логотипа Opera не использовался Illustrator или подобное программное обеспечение.
10. Логотип Багамских островов с использованием CSS3 от ForestMist
Ни Paint, ни Illustrator, только CSS3. Точная копия оригинального логотипа Багамских островов.
11. Чистые значки CSS
Простые, изменяемые размеры и пиктограммы — вот некоторые слова, которыми можно описать эту серию иконок CSS.
12. Дораэмон с CSS3
Мне нравится этот, да здравствует Дораэмон.
13. Треугольный попугай CSS от Erez
Это великолепно, я слышу, как этот попугай говорит со мной.
14. CSS Reddit Alien от Мэтью Джеймса Тейлора
Вы можете создавать таких персонажей без использования графического программного обеспечения.
15. Sir culito by soycachanilla.com
Этот персонаж напоминает мне врагов из Pacman, хороший дизайн CSS3.
16. Чистый CSS Twitter Fail Whale Стив Деннис
Красивое искусство CSS, посмотрите на сайте, как оно выглядит в других браузерах.
17. Шрифт Curtis CSS от Дэвида Десандро
Для создания этого шрифта использовался чистый CSS3, чистый код.
18. Pacman CSS от Романа Кортеса
В Pacman CSS не используются изображения, только изменяемый размер и векторный CSS с большим количеством строк кода, одна из которых хороша от Ramon.
19. Дом CSS от Криса Хестера
Этот дом был одним из первых экспериментов с CSS. Никакое графическое программное обеспечение не использовалось.
20. CSS House 2 Криса Хестера
После House 1 Крис решил еще раз попробовать CSS, это окончательный результат этого исследования.
21. CSS Pencils by Chris Hester
Это очень мило. Не только карандаши сделаны с помощью чистого CSS, но вы также можете изменить его цвета.
22. Bush CSS от Романа Кортеса
Думали ли вы, что Гомер Симпсон был забавным? Подумайте еще раз.
23. Пейзаж CSS от Metalorgy
На этом сайте вы можете увидеть, как художник создал этот красивый пейзаж с помощью чистого CSS.
24. CSS Flower by Rob Glazebrook
На этой странице показано, как сделать художественный цветок из CSS.
25. Диаграмма данных Pure CSS от CSS Glob
Эта диаграмма данных, созданная с помощью CSS, выглядит даже лучше, чем те, которые предоставляет Office.
26. Логотип SIGT от Романа Кортеса
Я не совсем уверен в авторе этого логотипа CSS, но большинство людей говорят, что это работа Романа Кортеса.
27. Дом из Лего от CSSplay
Чистый CSS может сделать что-то подобное, дом из Лего!!!.
28. The British Flag Version 1 by Stu Nicholls
Это кажется сложным, но вы можете найти по ссылке, как шаг за шагом создать этот флаг с помощью CSS.
29. Флаги Туниса и других стран от Kseso
На этой странице вы можете найти несколько классных флагов, сделанных с помощью CSS.
30. The British Flag Version 2 by Stu Nicholls
Этот британский флаг выглядит почти так же, как и предыдущий, в любом случае вы можете видеть, как был улучшен метод изготовления.
31. Эксперимент с CSS3 от insicdesigns
С появлением CSS3 стало возможным создавать элементы, подобные приведенным выше, не прорисовывая ни единой линии кисти.
32. Дурацкий пример CSS от Ro London
Вы можете сделать эту ночную сцену с помощью чистого CSS, поверьте!.
33. Случайный арт от Nielsen
Это простая игра углов, цветов и форм, очень красивый витраж.
34. Цифровые часы Маурисио Сильвы
CSS позволяет создавать простые, но все же классные вещи, такие как эти цифровые часы.
35. CSS Art – Mondriaan – Марк Шенк
Это точная копия картины Пита Мондриана.
36. Макет клавиатуры Windows от SEO Consultants
Ребята из SEO Consultants принесли нам эту клавиатуру CSS, хотя они говорят, что она все еще находится в стадии разработки.
37. CSS Lampa от Jan Bien
Очень простые формы, достаточные, чтобы сообщить вам, что вы видите лампу.
Вы также можете включать и выключать его.
38. Аватар кота Стю Николлс
Ну, я не уверен, что это кошка, но, по крайней мере, животное, УС.
39. Стол для снукера от Claire Campbell
Используя маркеры и рамку, Клэр удалось создать этот довольно классный стол с шарами и всем остальным.
40. Настольный компьютер Дэвида Хауса
Это выглядит довольно забавно, это напоминает мне первый компьютер, который родители принесли мне домой.
41. Сложенные кубики Q*Bert Style Джека Рэтклиффа
Дизайн CSS, вдохновленный классической игрой Q*Bert.
42. Кнопка No Image Aqua от Girliemac
С помощью CSS3 вы можете создавать красивые вещи, такие как эта глянцевая кнопка.
43. Базовый набор танграма Марка Шенка
Представьте себе возможности создания базовых фигурок танграма в CSS.
44. Бегущий человек Марка Шенка
Как мы уже говорили, после завершения танграма возможности растут в геометрической прогрессии.
45. Наклонная звезда
Простые формы можно использовать для создания довольно классной графики.
46. Демонстрация CSS Pixel Warp Pipe от rocco augusto
Я уверен, что многие из вас знают, откуда взялась эта трубка.
47. Pixel Mushroom CSS Demo
ок если был кто не знал откуда взялась трубка, теперь вспомнит.
48. Cookieface от Романа Кортеса
Простые формы, классная идея, хороший CSS от Романа Кортеса.
49. Масштаб CSS3!! Роман Кортес и Стью Николлс
С помощью CSS3 теперь возможно использование градиентов, теней и свечения, как Роман и Стю показали нам на этом логотипе.
50. Логотип Internet Explorer pure CSS от Andreas Jacob
Вдохновленный ребятами, которые сделали логотип Opera, Андреа решил создать логотип IE. Вам нужен Mozilla Firefox 3.6, чтобы увидеть его совершенным.
Хорошо, как мы видели на протяжении всего этого обратного отсчета.
За шедевром всегда стоит не инструмент, а рука мастера, способная создавать самые красивые вещи с помощью самых простых инструментов. Увидимся в следующем обратном отсчете.
Более 50 потрясающих примеров рисования CSS для вдохновения #100DaysOfCode
Рисование CSS — это искусство создания творческого объекта или рисунка только с использованием кодов CSS. Это забавная задача, которая показывает нам, чего разработчики интерфейса могут достичь с помощью чистого CSS.
Иногда к рисунку css добавляется анимация, чтобы сделать его более интересным.
Когда я впервые увидел рисунки CSS, я не поверил, что CSS можно использовать для создания таких рисунков. Я думал, что это было разработано некоторыми дизайнерскими приложениями, такими как Adobe Illustrator или CorelDraw, пока не увидел коды, подтверждающие, что это чистый CSS.
В большинстве стилей рисунка используется комбинация градиентов, псевдоклассов (:after и :before) и анимации css3.
Недавно я увидел в Твиттере #100DaysOfCode, что многие разработчики демонстрируют свои рисунки CSS.
Там проделывали потрясающую работу, но я видел, что некоторым из них не хватает дизайнерского вдохновения.
Так как я тоже front-end разработчик, я могу понять, что иногда мы не имеем никакого представления о том, что мы должны делать, особенно когда речь идет о дизайне или рисовании.
Я помню, что когда-либо видел много потрясающих рисунков CSS, демонстрируемых в Codepen. Затем я прихожу к мысли, что выбор и сбор лучших из них будет полезен для вдохновения других разработчиков, особенно новичков.
Итак, в этом посте я составляю список лучших рисунков CSS, которые вы можете использовать в качестве вдохновения. Давайте посмотрим!
Содержание
Лучшие примеры рисования CSS
1. У стены | Чистый CSS-рисунок Атанаса Атанасова
2. Король и муха, Альваро Монторо
3. Tron Skyline, Джорди Рю
4. Просмотр улиц и автомобильная анимация, Мохаммед Алозаиби
5. Codevember, день 23: рисование на чистом CSS, жизнь программиста! Nooray Yemon
6.
Мальчик и его дрон Tucker Massad7. CSS Lighthouse (чистый CSS рисунок/анимация) Tucker Massad
8. Летающий робот (чистый CSS рисунок/анимация) Tucker Massad
9. Китти и подводная лодка (рисунок/анимация на чистом CSS) от Tucker Massad
10. CodePen Home Night Train Рисунок CSS + анимация Эйны О
11. Pure CSS Responsive French Press Дарио Корси
12. Tank All The Things Хьюго Жироделя
13. Pure CSS Mini Thor Матеуса Феррейры
14. Электрическое пианино Джоша Фрая
15. Иллюстрация CSS – контроллер Xbox от Элли
16. Часы Pure CSS от Элли
17. Цифровое радио от Элли
18. Город | Чистый CSS-рисунок Серга
19. Спасите и полюбите свой дом, Ахмад Шадид
20. Для Беатрикс, Паоло Дузиони
21. Логотип Coderbits на чистом CSS, Алекс
22. Наше счастливое место, Паоло Дузиони
Вы можете сделать с одним Div
В этом разделе вы увидите список рисунков CSS, которые не только используют чистый CSS, но и используют только один тег div.