Css рисование: Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих

Как рисование на чистом 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-фреймворки, о которых все кругом говорили. Я видел много шума вокруг React и решил попробовать его.

Вот воображаемая беседа со мной самим, точно отражающая те проблемы, с которыми я столкнулся в этой гонке:

Онлайн-ресурсы: Реакт — то, на чем вам стоит сосредоточиться для создания интерфейсов современных веб-приложений.

Я: Звучит круто! Что мне нужно, чтобы начать новый проект на Реакте?

Онлайн-ресурсы: Ага. Мы можем инициализировать наш проект с помощью 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» весьма неплох.

Онлайн-ресурсы:

Я: Ух. Понятия не имею, что делает половина этого кода. Но вот эти компоненты выглядят знакомыми. С базовыми компонентами понятно, но почему в них вложены свои компоненты, а в те — еще какие-то?

Онлайн-ресурсы: О! Это лишь потому, что представление интерфейса можно разбить на родительские и дочерние компоненты.

Я: Но далеко не просто родитель и ребенок! Там, похоже, пра-пра-прадеды с пра-пра-правнуками и всеми промежуточными поколениями. Что там творится?

Я: Знаете что… не надо на это отвечать. Реакт так популярен, значит, он должен быть простым. Видимо, я просто тупой, раз задаю столько вопросов. Точно, не гожусь я в разработчики. Нечего мне и пытаться выучить современную веб-разработку.

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

Я глубоко уверен, что случайно открыл замечательный способ объяснять React-компоненты, повозившись с рисованием на чистом CSS.

Это просто отличная история. Сходите за любимым напитком, если желаете.

Как я открыл рисунки на чистом CSS

Пока я пытался освоить Реакт, я устроился на работу специалистом IT-поддержки. С первого же дня, когда мне пришлось вкручивать лампочки на третьем этаже, я с трудом мог высидеть до конца рабочего дня.

Однажды мне нужно было сделать объявление о сломанном принтере, или о сломанной двери (знаете, ведь «айтишник» и завхоз — это же одно и то же). Я наткнулся на векторный редактор под названием Inkscape, в котором и нарисовал объявление. Я прежде не имел дела с векторной графикой, но мне очень понравилось создавать фигуры, манипулировать ими и раскрашивать, чтобы получить итоговый рисунок.

Чтобы сбросить накопившееся раздражение от суровых будней «айтишника», я решил часок поиграть с Inkscape в обед. Со временем я открыл для себя Dribbble (способ показать и рассказать для дизайнеров) и Affinity Designer (как Inkscape, только намного лучше), которые подстегнули меня еще плотнее заняться векторной графикой.

Чем больше я практиковался в векторной графике, тем больше я осознавал, что ключ к успеху — посмотреть на итоговый рисунок, разбить его на меньшие фигуры, создать эти фигуры и раскрасить в удачные цвета.

У меня стало действительно хорошо получаться. С этой новообретенной уверенностью я решился на еще один подход к веб-разработке.

Еще до того, как влипнуть в Реакт, я наткнулся на Codepen и полюбил его, поскольку он был как Dribble для фронтендеров. Я по-прежнему заглядывал на его главную страницу ради всех тех крутых штук, что люди там создавали. В числе таких штук мое внимание привлекли картинки на чистом CSS. Я подумал: «Ух! Это же как моя векторная графика, но вместо Affinity Designer у них CSS!»

В конце концов я научился делать картинки на чистом CSS и здорово набил руку в этом.

Сцена из игры Zelda: A Link to the Past на чистом CSS

Процесс работы был точно таким же, как и с векторной графикой.

1. Либо рассматриваю существующий рисунок, который хочу воссоздать, либо представляю себе итоговый рисунок в уме, используя Dribble для вдохновения.
2. Разбиваю этот рисунок на небольшие компоненты, которые нужно создать.
3. Создаю эти компоненты с помощью CSS и помещаю в нужные места.
4. Подбираю цвета с помощью Dribbble, Coolors и/или Colorzilla

Шаг 2 из этого списка оказался самым трудным. По мере того, как я брался за всё более сложные рисунки, я всё больше понимал, что мне нужно лучшее определение для компонентов, которое объясняло бы их иерархию.

Понимание иерархии компонентов

Что я имел в виду под объяснением иерархии компонентов в чисто CSSном рисунке? Что ж, посмотрим на пример.

Взгляните на мой векторный рисунок с коалой:

Если я теперь спрошу у вас, из каких компонентов состоит этот коала, я предполагаю, что вы дадите один из двух ответов.

С одной стороны, можно сказать, что компоненты коалы — это уши, глаза, нос, голова и шерсть.

С другой стороны, можно еще сильнее углубиться в детали и сказать, что компоненты коалы — 3 светло-серых кружка, 2 тёмно-серых кружка, 2 белых кружка, 2 тёмно-синих кружка, коричневый скругленный прямоугольник и два светло-серых треугольника.

Оба ответа нельзя назвать неправильными. Первое объяснение более широкое и обобщенное, второе же очень точное и конкретное.

Этот пример был призван показать, что в описании компонентов рисунков на чистом CSS присутствует иерархия.

В более сложном CSS-рисунке, типа показанного ниже подземелья из «Зельды», в иерархии компонентов будет еще больше уровней.

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

Если взять предыдущего коалу как пример, можно разбить его на отдельные фигуры, а затем объединить некоторые из этих фигур в более сложные части его тела (в нашем случае, глаз и ухо).

Отдельные фигуры — самый нижний уровень иерархии компонентов, а следующий уровень — части тела коалы, некоторые из которых содержат несколько фигур.

Короче говоря, способность выделять из желаемой итоговой картинки упорядоченную иерархию компонентов здорово упрощает процесс. Я могу начать с нижнего уровня иерархии компонентов и выстраивать работу снизу вверх. Можно будет собирать итоговую картинку элемент за элементом.

Когда после этого я снова взялся учить Реакт, преимущества компонентности Реакта стали абсолютно логичными. Но объяснения иерархии/структуры компонентов показались мне крайне непрактичными (хотя я уже и понимал, к чему они пытаются подвести).

Поэтому я придумал способ объяснения иерархии Реакт-компонентов, который я называю «проектирование поселка на Реакте»

Проектирование поселка на Реакте

Я буду сравнивать иерархию компонентов в Реакт-приложении с иерархией поселка/городка.

В иерархии поселка 4 главных уровня иерархии (от общего к частному):

1. Поселок
2. Районы
3. Кварталы
4. Жилые Дома

Поселок

Начнем с поселка, как с самого очевидного.

Поселок — это эквивалент целого представления, например, главной страницы

Это самая общая часть иерархии поселка. А что, если я сейчас спрошу вас, из каких компонентов поселок состоит?

Как и в случае с нашим коалой, описать это можно разными способами.

Дома

Начнем с самого конкретного уровня (нижнего уровня в иерархии). На самом базовом уровне можно сказать, что поселок — это коллекция домов. Дома — это строительные блоки поселка.

Подобным образом можно описывать строительные блоки представления с помощью «домов». Дальше дробить их невозможно.

В нашем примере с коалой, тёмно-серый кружок — это «дом».

В примере с главной страницей Airtable внизу заголовок, абзац, кнопка подписки — примеры «домов», в сумме составляющих представление.

Кварталы

На следующем уровне иерархии поселка у нас кварталы.

Кварталы — это коллекции домов. Так что в широком смысле можно сказать, что поселок — это коллекция кварталов.

В примере с коалой можно сказать, что глаза — это пример «кварталов»:

«Квартал» глаза

Глаза — следующий уровень над «домами», он включает белый кружок и темно-синий кружок. Хотя мы можем отнести глаза к «кварталам», сами по себе они не образуют итоговой картинки.

«Кварталы» в интерфейсе — это коллекции «домов», которые вместе составляют определенную функциональность или вместе служат определенной цели в представлении. Однако, как и глаза у коала, они не действуют самостоятельно.

Например, следующие заголовок, абзац, форма ввода и кнопка на главной странице Airtable вместе служат для того, чтобы пользователь мог подписаться.

По этой причине их можно назвать «кварталом», состоящим из отдельных «домов». Или разделом подписки, состоящим из заголовка, абзаца, формы ввода и кнопки. Аналогично, самостоятельным представлением он выступать не может.

Районы

Можно подняться еще на уровень в нашей иерархии поселка и описать его как коллекцию районов.

Район — это коллекция кварталов. В терминах интерфейса, я предпочитаю думать о «районах» как о разделах интерфейса.

Например, вот «шапка» главной страницы Airtable, представляющая собой «район»:

Район «шапки» — коллекция из трех «кварталов». Сверху в ней панель навигации. Затем идет видео и узор вокруг него, образующие еще один «квартал» слева. А справа «квартал» подписки, который мы только что описали. Эти «кварталы» составляют раздел шапки, или, повторюсь, район «шапки». Все «кварталы» в этом «районе» можно разбить дальше на отдельные «дома» (скажем, кнопку «Подписаться»).

Давайте пройдемся по сайту Airtable от самого верха и выделим разные районы.

Наверху у нас район Шапка:

Дальше у нас район с разделом контента. Назовем его Раздел контента А:

«Район» раздела контента А

Есть еще один район с разделом контента, который можно назвать Раздел контента Б:

«Район» раздела контента Б

Дальше у нас район для отзывов, который можно назвать Раздел контента В:

«Район» раздела контента В

За ним идет еще один район, который можно назвать Раздел контента Г:

Раздел контента Г

Примечание: я подсветил рисунок вверху зеленым, чтобы было видно, что это раздел, хотя в нем всего один «квартал», который мы описали ранее как «квартал» подписки.

И наконец, район Подвал:

«Район» подвала

Если собрать все эти районы вместе, получится поселок (или, в нашем случае, представление).

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

Немного мыслей в заключение

Я признаю, что «Проектирование поселка на Реакте» не всегда бывает идеальной аналогией. Но я думаю, что это помогает донести идею, что с помощью Реакта можно создавать интерфейсы, состоящие из представлений с иерархией компонентов. Как в рисунках на чистом CSS, крайне важно уметь творить большое по частям. И с этим Реакт справляется блестяще.

Надеюсь, вы станете лучше понимать Реакт-компоненты и пользу от них.

Как я намекнул раньше, есть множество причин, почему Реакт может с трудом даваться новичку. Если вам понравилась эта заметка, вам наверняка понравится и моя электронная книга под названием «Изучение React.js для визуалов».

Изучение React.js для визуалов

В этой книге я объясняю самые основы React.js через принципы разработки, наглядные примеры и сверхпрактичные методологии обучения вроде той, что я применил в этой заметке.

Можете читать ее бесплатно или поддержать меня материально, чтобы я мог создавать больше контента.

С наилучшими пожеланиями,

Майк Манджаларди,

основатель сайта Coding Artist

P.S. Это тоже может быть интересно:

Рисование с помощью кода: Диана Смит создает портреты в стиле барокко с помощью CSS

tanjand November 9th, 2019

Рисование с помощью кода: Диана Смит создает портреты в стиле барокко с помощью CSS

Имея чуть больше, чем текстовый редактор и многолетний опыт работы в качестве веб-разработчика — Диана Адрианна Смит создает фламандские и барочные портреты с использованием HTML и CSS, двух основных языков разметки презентаций, предназначенных для отображения веб-страниц.
Портреты заполняют тысячи строк кода, и у Смит есть строгое правило: все элементы должны быть набраны вручную. Это означает, что она не полагается на библиотеки, ярлыки или какой-то визуальный редактор. Эти изображения написаны частично как эссе, с необоснованным количеством проб и ошибок.

Устранение сложностей, связанных с CSS или HTML, может помешать даже хорошему разработчику задать работу на длительное время, чтобы формировать жемчужные ожерелья, прически, мимику и кружевные воротнички. Но в Twitter Смит говорит, что она закончила свою последнюю работу за два выходных дня.

Часть из 1968 строк кода CSS, которые Смит написала для создания портрета выше.

Twitter

Tags: цифра

Telegram channel

• Гитаристка

  Эта загадочная картина маслом, считающаяся анонимной копией картины «Гитаристка» Вермеера, на самом деле может быть оригинальной…

• Нужно ли быть человеком, чтобы понимать искусство? Интеллектуальный критик-пёс

  Интеллектуальный критический пёс, который ходит на выставки. Он не просто уже посещает выставки, а выдает свои рецензии. Робот-терьер сам…

• Николай Локертсен

  Николай Локертсен — концепт-художник и иллюстратор из Норвегии. Он работает в киноиндустрии и визуальных эффектах с конца 90-х. Как…

• Тиберий, рыбак и рыба в подарок

  Эпические саги, мрачные легенды, запутанные политические сюжеты и незабываемые персонажи — история Рима, одной из самых влиятельных…

• Возвращение золота Геркулесу

  Геркулес Мастая, самая большая бронзовая статуя древности, сохранилась, потому что в нее ударила молния. И теперь Музеи Ватикана…

• Вопросы времени

  Исмо Каяндер: Подсолнухи (2008) Как мы ощущаем современность? Заканчивался Викторианский век с его неспешностью и жесткими нормами и на…

• Трудности Перевода: Чудеса Света с ошибками в Midjourney

  Как бы выглядели чудеса света, если бы их названия были написаны неправильно? Чтобы ответить на этот интригующий вопрос, обратились за помощью…

• Карел Аппель – дитя навсегда

  В 1948 году молодому Карелу Аппелю (1921-2006) поручили нарисовать фреску в столовой мэрии Амстердама. Простыми формами и яркими красками…

• Умер Берлускони

  Сильвио Берлускони и Вероника Ларио Берлускони становился премьером в 1994, 2001, 2005 и 2008 годах, и считается одним из самых…

Рисование с помощью кода: введение в искусство CSS | Анна Пол

·

·

с помощью CSS для отображения фигур в браузере. Эти формы настраиваются путем присвоения значений различным свойствам, таким как высота , радиус границы , box-shadow и background-color . Благодаря бесчисленным свойствам CSS для работы можно создавать сложные элементы без программного обеспечения для создания векторных иллюстраций, такого как Illustrator.

Все дело в Div

Элемент

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

Графика Анны Паул

1. Родительский
   
   Каждая композиция CSS начинается с родительского div. Думайте об этом как о своем холсте. В приведенном выше примере более эффективен, чем class='circle' , потому что это позволяет мне нацеливаться на конкретную сферу и придавать ей разные стили. Помните, что назначение класса ничего не делает по умолчанию. Стили должны быть применены, чтобы дать символ div.

CSS, небольшое резюме

CSS — это сокращение от каскадных таблиц стилей. Таблица стилей взаимодействует с элементами HTML, чтобы добавить эстетическую ценность документу. Чтобы применить пользовательские стили, мы создаем серию из правил CSS , обычно в отдельном файле .css . Правила — это свойства CSS, применяемые к одному или нескольким целевым элементам HTML. Каждый состоит из селектора и блока объявления . Селектор указывает на конкретный элемент HTML, который вы хотите настроить, а объявление определяет фактический стиль.

Графика Анны Паул

Селектор выше относится к классу под названием «прямоугольник». Мы можем сказать, потому что точка (.) предшествует имени. Селекторы классов дают нам возможность нацеливаться на определенные элементы HTML и назначаются внутри открывающих тегов следующим образом:

. Селекторы идентификаторов , которым предшествует символ решетки (#), работают аналогично, но их следует использовать с осторожностью. Не забывайте, что у каждого элемента может быть только один идентификатор, и на каждой странице разрешен только один элемент с определенным идентификатором.

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

Набор инструментов CSS для начинающих

С основами можно многого добиться. Начните с малого и добавляйте новые свойства CSS в свой инструментарий по мере роста. Рассмотрите подкомпоненты вашей графики, а затем упростите. Например, поставить твердую background-color перед игрой с градиентом и поэкспериментируйте с border-radius перед использованием clip-path для создания пользовательских форм. Попробуйте плоскую версию своего дизайна, прежде чем преобразовывать его в 3D-версию. Ниже приведен краткий список свойств CSS, которые помогут вам начать работу.

Графика Анны Паул

1. высота , ширина
   Эти свойства используются для установки высоты и ширины вашего элемента. Размер div по умолчанию определяется содержащимся в нем HTML-содержимым. Без какого-либо содержимого ваш div не будет существовать. По этой причине важно явно упомянуть эти свойства. Используйте px или % значений, чтобы определить размер вашего div.
2. background-color
   Это свойство устанавливает цвет вашего div. Мне нравится использовать палитру цветов Google, чтобы найти идеальный оттенок и соответствующее ему значение HEX или RGB.
3. border-radius
   Это свойство устанавливает радиус углов вашего div. Div по умолчанию квадратные, но вы можете создавать другие формы, манипулируя границами. Если вы присвоите этому свойству одно значение, этот радиус будет применяться ко всем четырем углам. Например, border-radius: 50% образует круг. Вы можете указать до трех дополнительных значений для отдельной настройки углов.
4. transform:translateY/translateX
   Это свойство перемещает ваш элемент div вертикально/горизонтально вдоль 2D-плоскости. Позиционирование элементов является неотъемлемой частью создания более сложных дизайнов. Используйте значения px , чтобы начать перемещение компонентов по холсту.

Метод проб и ошибок

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

Графика Анны Паул

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

Надеюсь, вам понравится воплощать свои проекты в жизнь с помощью HTML и CSS. Ищите больше художественного контента CSS и делитесь своими творениями с внешним сообществом на CodePen. Удачного кодирования!

Справочные материалы

• Введение в создание CSS Art-Poulami Chakraborty
• Руководство для начинающих по чистым изображениям CSS - Michael Mangialardi
• CSS Reference
• W3Schools
• GeeksFor Компьютерщики
• Хитрости CSS

Как я начал рисовать CSS-изображения. Меня вдохновляет графическое, визуальное… | Саша

Опубликовано в

·

Чтение: 10 мин.

·

9 февраля 2017 г.

CSS Girl

Меня вдохновляет графический, визуальный дизайн и милые вещи. Но, к сожалению, я не умею рисовать от руки. Мне нравится смотреть на иллюстрации других дизайнеров на Dribbble, и я завидовал тому, что они могут рисовать такие милые и замысловатые иллюстрации, которые в то же время такие привлекательные.

Посмотрите мой первый рисунок в приложении Paper.

Время истории. Возьмите немного чипсов, этот пост заставит вас проголодаться.

Я наткнулся на Codepen, изучая интересные анимации. Увидев много визуально красивых ручек, я тоже захотел создать что-то красивое.

Я посмотрел, как некоторые разработчики рисовали крутые сложные фигуры с помощью холста. Я тоже решила попробовать холст. У меня были проблемы с холстом, потому что он сильно зависел от математики и JavaScript. Я хотел сосредоточиться на визуальных эффектах больше, чем на интенсивной математике. Нет перехода на холст (по крайней мере, на данный момент).

Потом было соревнование Codevember, где в ноябре вы каждый день практиковались в написании кода. День 1 и день 2 были тяжелыми, потому что я все еще учился ориентироваться во всех доступных онлайн-ресурсах.

В День 3 я решил нарисовать лицо Пикачу на весь экран. В то время Pokemon GO все еще был популярен, и я просто обожаю Пикачу. И еще потому, что он был очень простым и состоял только из кругов и радиуса границы CSS. Я добавил к нему аудиоэлемент HTML5, чтобы сделать его еще симпатичнее. Я был очень доволен результатом. Именно это побудило меня продолжать усерднее работать, чтобы узнать больше о CSS.

Pikachu

К дню 8 Codevember я смог сделать эту ручку для зарядки аккумулятора, для чего потребовалось немного jQuery/JS. Я усердно работал каждый день и учился, создавая новый контент, чтобы практиковать функции, которые я исследовал.

Зарядка батареи

Я начал изучать плоские дизайны на Dribbble и подумал, смогу ли я сделать эти плоские изображения с помощью CSS? Да, это был мой следующий вызов.

В день 14 декабря я приготовил простую чашку кофе с некоторой помощью JavaScript, где можно было выбирать между различными вариациями: американо, латте, капучино или вода (для разнообразия кофеина).

Кофейная чашка

К дню 21 декабря я экспериментировал с анимацией CSS и использовал основные формы CSS, такие как прямоугольник и круг, чтобы сделать этот монитор и кофейную чашку. Видимо я понял, что многие разработчики разделяют мою любовь к кофе!

http://codepen.io/sashatran/full/BQWNRe

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

Яйцо и сковорода

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

Рождественская елка

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

Итак, я подписался на Daily CSS Images Challenge Майкла Мангиаларди. Каждый день нам давали тему или тему, и нам ставили задачу использовать только CSS для ее иллюстрации. Этот вызов дал мне структуру и последовательность, чтобы продолжать создавать контент каждый день. Это также помогло мне творчески подумать о новых способах самовыражения и узнать больше приемов CSS, которые вы, возможно, никогда не используете в веб-дизайне.

День 1: Медвежонок

Первая задача была довольно простой, и вы могли сделать медвежонка с помощью основных форм, таких как круг. Но мне нравится делать милые вещи, я дала ему соску, чтобы он не плакал слишком много. https://codepen.io/sashatran/full/BpoLeE

День 2: Слон

Нееет, как нарисовать хобот слона? Я играл с различными формами CSS, искал ссылки, такие как CSS Tricks. После нескольких часов исследований я придумал этот кусок. https://codepen.io/sashatran/full/JEGJyz

День 3: Бобр

PBJ? Я не мог себе представить, как выглядит бобр. Мне потребовалось некоторое время, чтобы нарисовать это. Я искал изображения бобра в Интернете и черпал вдохновение из нескольких источников, чтобы собрать что-то вместе. Бобр подавал заявку на работу, и я хотел поддержать его поиски, поэтому дал ему галстук на всякий случай! https://codepen.io/sashatran/full/NdNqPo

День 4: Тигр

Rawr. Опять же, используя простые формы и радиус границы, я сделал полосатого тигра. Меня вдохновило то, как текст и веб-макеты были представлены в стиле плоского дизайна, поэтому я заставил тигра читать газету, чтобы быть в курсе текущих событий. https://codepen.io/sashatran/full/egZbKo

День 5: Любимое анимированное животное

Конечно, Майк Вазовски! Я большой поклонник Pixar. Я поэкспериментировал с другими приемами CSS, чтобы сделать рога и рот. Псевдоселекторы, такие как :before и :after, очень полезны при создании составных фигур с помощью одного элемента div. https://codepen.io/sashatran/full/YNWYQy

День 6: Часы

Простые часы. ТИК Так. Я немного схитрил с этим изображением, потому что хотел, чтобы часы представляли фактическое текущее время. Я использовал ванильный JavaScript для получения текущего времени и использовал функцию setInterval для увеличения угла часовой, минутной и секундной стрелок. https://codepen.io/sashatran/full/OWbJzG/

День 7: Линейка

Я снова немного сжульничал и использовал JavaScript для создания сантиметровых линий линейки, но быстро понял, что на самом деле можно сделать эти линии легко с помощью свойства box-shadow. https://codepen.io/sashatran/full/jyVzXP/

День 8: Блокнот

Используя больше Javascript, я создал кольцо блокнота, отверстия и использовал SVG для лица :p. К этому моменту я так много узнал о CSS, но я все еще только начинал с SASS и не осознавал, какие возможности SASS даст мне, пока кто-то не разветвил мою ручку на Codepen и не перестроил ее с помощью SASS. Мой разум был взорван. SASS был моим следующим вызовом для освоения. https://codepen.io/sashatran/full/LxxWqq/

День 9: Календарь

Я наткнулся на сайт a.singlediv.com Линн Фишер, она делает очень красивые CSS-изображения всего с одним div. До этого момента я создавал отдельные элементы div для каждой фигуры в своих изображениях. Это вдохновило меня сделать сегодняшнее задание одним дивом. https://codepen.io/sashatran/full/BpWLbN

День 10: Pencil Jar

Вдохновил на использование SASS в моем CSS. Это изображение карандашей было сгенерировано с помощью функции SASS @each. https://codepen.io/sashatran/full/VPpqRV

День 11: Пицца

Я большой гурман. Так что это был только вопрос времени, когда я направлю свою любовь к еде на образы, которые я создавал. Я получил этот шанс, когда пицца стала следующим вызовом! С такими простыми фигурами, как круг и треугольник, вы можете сделать кусочек пиццы! Я также добавил анимацию CSS для плавящегося сыра. Я хочу, чтобы приготовление пищи было таким простым. https://codepen.io/sashatran/full/QdgvLw

День 12: Гамбургер

Я узнал о радиальном градиенте фонового изображения и о том, как им можно манипулировать! Я использовал его, чтобы сделать семена кунжута на верхней булочке. Держите ингредиенты разделенными небольшим пространством, выделенным каждым элементом гамбургера. Этот вызов заставил меня очень проголодаться! https://codepen.io/sashatran/full/vgJNxE

День 13: Тако

Я снова использовал радиальный градиент, чтобы сделать градиент на тако, я также запустил канал на YouTube, чтобы поделиться своим опытом кодирования с другие. https://codepen.io/sashatran/full/RKZdgw

Watch Me Practice — CSS Taco

Day 14: Cheesecake

Мне очень понравился результат. Я узнал о rotateX, где вы можете вращать фигуру по оси X! Вы также можете сделать с rotateY и rotateZ. Я использовал это свойство, чтобы повернуть верхний слой чизкейка. https://codepen.io/sashatran/full/ggGeZr

Watch Me Practice — CSS Cheesecake

День 15: Тыквенный пирог

В этом примере используются простые формы CSS и box-shadow для создания теней. Чтобы сделать корж для пирога, я использовала три квадрата и повернула их под разными углами, закруглив углы с радиусом границы. Я проголодался, пишу это, а ты? https://codepen.io/sashatran/full/vgWyWd

Watch Me Practice — Pumpkin Pie

День 16: Франкенштейн

Я не фанат ужасов, но мне нужно было побороть свои страхи, чтобы справиться с задачей. К настоящему времени я уже привык комбинировать множество простых фигур, чтобы выразить то, что я хотел нарисовать. Я сосредоточился на том, чтобы превратить страшные вещи в более симпатичные изображения, используя плоский стиль дизайна. https://codepen.io/sashatran/full/bgajNZ

Watch Me Practice — CSS Франкенштейн

День 17: Зомби

Зомби трудно сделать милым, поэтому я накрыл его вкусным тортом. Я не думаю, что ему понравилось быть похороненным в сладости! https://codepen.io/sashatran/full/rjJYqy

День 18: Вампир

Я хотел внести изюминку в тему вампиров. Меня вдохновил пластырь, который был на мне (готовить очень опасно). До меня дошло, что эти бинты - маленькие кровопийцы. Мини-вампиры в реале! Я добавил сочащуюся кровь для драматического эффекта (подсказка: драматический звуковой эффект). https://codepen.io/sashatran/full/OWvNKv

Watch Me Practice — Band Aid Vampire

День 19: Монстр на выбор

Это было тяжело для меня, потому что я уже нарисовал своего монстра на выбор (Майк Вазовски). Я решил создать своего собственного милого маленького монстра, который не может перестать пускать слюни. Я назвал его Биби. https://codepen.io/sashatran/full/zNjoje

День 20: Супермен

Я решил научиться создавать людей из CSS с помощью простых форм. Я посмотрел урок для Adobe Illustrator на YouTube о том, как рисовать людей простыми фигурами. Это была моя первая попытка, и поскольку приближался День святого Валентина, я хотела помочь мистеру Кенту найти девушку. Листайте вправо, дамы! https://codepen.io/sashatran/full/egjBar

Смотрите, как я тренируюсь — CSS Superman

Переходим к ежедневному соревнованию CSS

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

Магазин CSS на Codepen

Вслед за этим я создал еще один шедевр мистера Туска. Плоский дизайн стола. Эти части были замысловатыми с мелкими деталями, которые было так приятно запечатлеть. Именно в этих тонких деталях изображение становится поистине уникальным.

CSS Office Space

Чему я научился

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

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

Продолжение следует….

Спасибо, что нашли время прочитать о моем путешествии.