Несмотря на то, что искусство CSS существовало с момента появления закругленных углов, в последнее время этот вид искусства пустил более глубокие корни. Учитывая его ограниченный характер, создание CSS-арта требует нестандартного мышления.
Вот список моих лучших руководств по веб-разработке.
Полное руководство по CSS-гибкости на Hashnode.
Ultimate CSS grid tutorial на Hashnode.
Функции высшего порядка .map, .filter и .reduce на Hashnode.
Подписывайтесь на меня в @ Twitter, Instagram и fb, чтобы никогда не пропустить премиальные статьи.
Но ждать. Что такое CSS-арт? CSS-рисунки основаны на использовании каскадных таблиц стилей - языка, созданного для стилизации HTML-документов с использованием его функций способом, который изначально не предполагался. .
В этом уроке я буду использовать ArtBox, потому что он упрощает объяснение искусства CSS. Но те же методы будут работать в Chrome и других браузерах.
Заводной апельсин
Это текущий НЗП плаката Заводного апельсина. Вероятно, потребуется еще неделя, чтобы закончить лицо, после чего изображение будет обновлено, но мне пришлось опубликовать статью, так как она уже становится довольно длинной.
ArtBox похож на Photoshop для CSS - это редактор, созданный специально для создания искусства CSS (также известного как рисование CSS. ) Если вы графический дизайнер или просто человек с художественным образованием, вы можете получить его в раннем доступе на официальном сайте ArtBox, где вы можете получить свою лицензию.
Классический плакат Заводной апельсин, воссозданный в редакторе CSS ArtBox.
Руки Моны Лизы
Вот еще один пример, который исследует некоторые возможности.
Некоторые методы, использованные для создания этого изображения CSS, будут объяснены в этом руководстве. С другими вам просто нужно проявить изобретательность. Это сложная задача!
Существует множество банальных иллюстраций CSS, которые напоминают мне изображения из детских книг. Это хорошо работает в контексте веб-дизайна. Я видел милого медведя коалу, маяк, роботов, глаза, плоские цветные пейзажи и другие простые формы.
Чтобы перейти от простых цветных квадратов и кругов к созданию иллюстраций, вам необходимо использовать обычные свойства CSS таким образом, чтобы они соответствовали приемам, используемым в традиционном искусстве. .
Быстрый пример
Давайте подробнее рассмотрим глаз Заводного апельсина.
Этот глаз был создан с использованием одного элемента HTML. Ключ к созданию сложных визуальных эффектов - объединение лучших свойств CSS вместе.
Здесь нам потребовались закругленные углы, 4 градиента (3 неповторяющихся радиальных и 1 повторяющийся конический с прозрачными ограничителями градиента) и 1 внутренний тень.
Один дополнительный элемент использовался в качестве накладки для создания отражения света от поверхности. Он был создан с использованием полупрозрачной внутренней тени.
Тени имеют приоритет над градиентами
В CSS внутренние тени имеют приоритет над градиентами. Другими словами, они отображаются поверх градиентов. Давайте посмотрим, что это означает визуально:
Яркая бирюзовая тень рисуется поверх зеленого повторяющегося конического градиента.
Что нужно знать о множественных тенях
В CSS вы можете указать несколько теней на одном элементе. Последняя тень в списке отображается под всеми остальными. Здесь красная тень определяется слотом №4… а синий, желтый и зеленый отображаются сверху.
Тени следуют за формой элемента
Нажав кнопку O в ArtBox, я превратил квадрат в круг, сохранив все тени из предыдущего примера. Но вы также можете редактировать каждый угловой радиус индивидуально.
Эту идею можно использовать для имитации окружающего и рассеянного света.
Радиальный градиент в слоте # 3 также использовался для создания пятна зеркального света.
Волосы, Мех, Ресницы
Вы можете имитировать волосы и мех животных, создав элемент с прозрачным фоном и применив к нему только тонкие повернутые тени. Изменение размера и наклон элемента могут привести к получению именно той формы, которую вы ищете.
Использование нескольких градиентов
Подобно множеству теней, эффекты градиентного изображения можно использовать для создания довольно интересных эффектов или более органических текстур.
Последний градиент в списке отображается первым. Взгляните на этот пример, в котором объясняется, как использовать градиенты для создания более сложного арт-объекта:
Конечно, без контекста эта форма бессмысленна. Но обратите внимание, насколько легко управлять сложными градиентами CSS. Эта функция играет ключевую роль в оказании помощи художникам CSS в создании эффектов, похожих на рисование.
Как и тени, градиенты CSS подчиняются правилам приоритета. Помните, что для одного элемента HTML можно использовать несколько градиентов. В CSS вы должны разделять градиенты запятой в свойстве background-image.
Блокировка Z-индекса
Рисуя с помощью CSS, вы хотите планировать свое искусство, думая, как художник. Сначала вы хотите создать фоновые объекты. Наложите на них предметы, которые находятся ближе к камере. Используйте объекты, чтобы блокировать других, чтобы создавать новые формы.
Использование наложения: скрыто для создания фигур неправильной формы
Вложение элементов - один из наиболее важных методов создания фигур, с которыми вы обычно не сталкиваетесь в CSS. Его можно использовать, чтобы скрыть объекты внутри других объектов. Здесь повернутый черный квадрат заблокирован контуром родительского элемента, в который он был вложен.
Моделирование трехмерной перспективы
Фоны необходимы для того, чтобы сделать ваше искусство CSS более впечатляющим. Фоновый узор можно смоделировать с помощью различных комбинаций градиентов.
3D-перспективу можно имитировать с помощью перекошенного элемента. В этом примере плиточный пол был создан с использованием 1 элемента HTML с 4 градиентами и 1 тенью.
Это напоминает мне Blender! Но нет ... это всего лишь 22 элемента HTML.
Чашка с грибами Mario Kart 8 на чистом CSS
В следующем фрагменте демонстрируется элемент CSS, который почти напоминает трехмерный объект, как если бы он был визуализирован с помощью современной видеокарты, но в чистом CSS.
Давайте отключим закругленные углы:
Меньше - больше
При создании иллюстраций CSS ваша цель - создать как можно больше реализма, отдавая предпочтение творческому использованию свойств CSS над количеством элементов HTML.
Вы можете поиграть с комбинацией эффектов на отдельном элементе, чтобы создать что-то похожее на металлический материал, как показано здесь.
После того, как материал создан, можно очень весело экспериментировать с элементами, вращая, растягивая и перемещая их.
Ограничения CSS заставляют мыслить интуитивно. Традиционным художникам этот процесс, вероятно, покажется более естественным. Но как только будет достигнута правильная комбинация эффектов, вы сможете создавать эффекты, близкие к фотореалистичным.
Подробнее о градиентах CSS
Градиенты CSS бывают трех видов: линейные, радиальные и конические. Конический градиент (на картинке ниже) можно использовать для создания резких краев.
Вы можете сделать все это вручную с помощью инструментов разработчика браузера, но ArtBox помогает визуально продемонстрировать идею без ввода значений CSS.
CSS-градиенты используют ограничители градиента. Естественно, каждая остановка должна быть указана с более высоким процентом, чем предыдущая, чтобы создать плавный градиент.
Пиксельное бритье
Сглаживание пикселей - это метод градиента CSS, в котором вы используете ограничители градиента CSS для создания резких краев вместо постепенного перехода цвета.
В сочетании с пустыми (прозрачного цвета) ограничителями градиента можно создавать объекты с острыми краями. А вот как конический градиент используется для создания лезвия ножа:
Изобретательные методы
Как и в любом другом виде искусства, изобретение новых техник имеет решающее значение для создания выдающейся работы. Что мне нравится в искусстве CSS, так это то, что оно требует нестандартного мышления. Нож в части Заводного апельсина был создан с использованием градиента с прозрачностью вокруг упоров, определяющих лезвие.
Попытка мыслить иначе важна для создания искусства CSS. В конце концов, изначально он никогда не предназначался для такого использования. Однако это действительно показывает гибкость CSS, когда вы занимаетесь искусством или создаете веб-сайты.
Ключевые свойства CSS для создания CSS Art
Закругленные углы, несколько градиентов и несколько теней.
- Закругленные углы. Используется для определения контуров неправильной формы, например лиц, пальцев, круглых предметов (жемчуг, теннисные мячи, дверные ручки).
- Несколько градиентов. Слои градиентов (особенно при совместном использовании в сочетании с различными типами градиентов.)
- Множественные тени. Если тени заданы без цвета фона (или прозрачного цвета фона) на элементе, их можно использовать для создания тонких изогнутых линий, складки одежды, человеческие волосы, мех животных, ресницы и множество других эффектов.
Кружево на чистом CSS
И, наконец, эта невероятная иллюстрация CSS, созданная Дайаной Смит, демонстрирует, что возможно, если довести CSS до его абсолютного предела.
Сделано в Chrome CSS, нарисованное Дианой Смит (Посмотреть оригинал | GitHub)
Визуальное создание CSS Art в ArtBox
Вы можете создавать CSS-изображения, создав HTML-документ, а затем просто настраивая каждый элемент DIV вручную с помощью инструментов разработчика Chrome.
Это может занять много времени, потому что вам нужно настроить каждое свойство и значение вручную, а поддержка нескольких теней или градиентов отсутствует.
ArtBox лучше, чем инструменты разработчика Chrome?
Chrome - мой любимый браузер, но в нем нет интерфейса для нескольких теней, многоуровневых градиентов и типов градиентов. . Вам все равно придется вводить длинные имена свойств вручную, прежде чем они появятся в консоли Chrome для редактирования.
Если интересно, проверьте ArtBox через его официальный сайт.
