Рисование с помощью CSS: Аниме-персонаж

Рисование в CSS расслабляет (по крайней мере, меня) и является отличным способом попрактиковаться в CSS. Иногда полезно попробовать новые функции, которые не всегда могут попасть в производство, потому что не все браузеры могут их поддерживать.

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

Рисунок

Рисование началось с нуля. Никакого HTML, никакого CSS. Просто чистая страница. Изначально я вообще не знал, что буду рисовать! Но рядом со мной лежал второй том манги «Плуто», поэтому я решил нарисовать что-то связанное с мангой, черпая вдохновение с обложки (например, для носа и рта).

Мне нравится результат, но я предвзят. Вот живая демонстрация рисунка (полную версию можно посмотреть на CodePen):

Давайте посмотрим, как оживают различные части изображения.

Холст

Не волнуйтесь. В искусстве CSS нет места <canvas>. Мне нравится задавать корневой элемент рисунка как «холст» и добавлять сетку в начале:

.canvas {
  width: 80vmin;   /* so it's responsive */
  aspect-ratio: 1; /* so it's a square.  */
  background:
    repeating-linear-gradient(#0003 0 0.125%, #0000 0 0.9875%, #0003 0 10%),
    repeating-linear-gradient(90deg, #0003 0 0.125%, #0000 0 0.9875%, #0003 0 10%);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Этот код генерирует фон с сеткой 10×10. Каждый квадрат составляет 10%, и знание этого помогает мне размещать элементы позже: посчитайте количество квадратов и умножьте на 10, чтобы вычислить процент, необходимый в top, left, width или height.

Голова/лицо

Лицо делится на три части: лоб, левая и правая стороны. Для них я использовал один элемент (лоб), а затем псевдоэлементы ::before (слева) и ::after (справа) для сторон.

Я мог бы просто сделать форму яйца, что очень легко сделать в CSS с помощью border-radius и разных значений для горизонтали и вертикали:

.egg-shape {
  width: 80vmin;
  height: 80vmin;
  border-radius: 100% / 80% 80% 120% 120%;
  background: red;
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

С другой стороны, наличие разных элементов позволило выполнить некоторые дополнительные настройки (например, добавить transform или вставку теней), что было бы сложнее, если бы это был только один элемент. Так что не все так плохо.

Рот

Рот — это не простая линия. Он также состоит из трех частей, чтобы придать некоторую «текстуру», так что это не просто плоская вещь. В данном случае я сделал это, играя с шириной границ, но я мог бы сделать это с помощью clip-paths (это было бы мучением позже с псевдоэлементами) или линейных градиентов (это было бы мучением позже с тенями). Браузеры могут отображать немного по-другому, но это цена, которую я заплачу.

Объект позже используется для создания тени для губ с помощью box-shadow: одна сверху, другая сбоку.

Уши

Оба уха одинаковые. Чтобы быстро перевернуть элемент по горизонтали, нужно применить transform с scaleX(-1) и вуаля! Готово!

.ear {
  /* code to draw the ear: border-radius, backgrounds... */
}

/* select the second ear and flip it */
.ear + .ear {
  transform: scaleX(-1);
}
Вход в полноэкранный режим Выход из полноэкранного режима

После этого, чтобы они выглядели немного по-разному, я повернул второй под немного другим углом, а также немного отодвинул его дальше (с другой стороны). В сочетании с различными элементами с обеих сторон это создает впечатление, что у вас два разных уха.

Глаза

Рисовать глаза всегда непросто. Они делают или разрушают рисунок, и баланс между одним и другим очень тонкий. Глаза на этом рисунке далеки от совершенства, но они хороши.

Каждый глаз состоит из двух элементов: div (для самого глаза) и одного псевдокласса (для зрачка и радужки). Глаз будет иметь overflow:hidden, чтобы псевдоэлемент не выходил за его пределы.

Зрачок и радужка — это радиальные градиенты, с более радиальными градиентами для отражения света и бокс-тени для прорисовки небольших линий на каждой стороне глаза. Однако после дублирования глаза и переворачивания второго глаза осталось сделать еще кое-что: чтобы избежать нежелательной симметрии, которая выглядит странно (отражения света идут с разных сторон), псевдоэлемент второго глаза тоже нужно перевернуть:

.eye {
  /* eye styles */
}

.eye + .eye {
  transform: scaleX(-1); /* flip the eye */
}

.eye + .eye::before {
  transform: scaleX(-1); /* flip the iris in the second eye */
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Шея

Элемент шеи будет просто контейнером для своих псевдоэлементов ::before и ::after, которые будут сторонами шеи.

Используя box-shadow, тень элементов будет цветами шеи, и это обеспечит некоторую тень. Используя transform для поворота и перекоса, формы будут более мягкими и больше похожими на шею из мультфильма, чем если бы я просто закруглил углы.

Волосы

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

.bangs {
  width: 30%;
  height: 30%;
  border-radius: 0 0 100% 0;
  /* to draw the external border */
  box-shadow: inset -0.5vmin -0.25vmin; 
  /* the hair and internal border */
  background: radial-gradient(100% 170% at -10% 0, #0000 58.75%, #000 59% 60.25%, var(--hair-dark) 60.5%, var(--hair) 78%); 
}
Вход в полноэкранный режим Выход из полноэкранного режима

Если перевернуть волосы (помните трюк scaleX(-1)) и повернуть их, они будут выглядеть достаточно разнообразно, чтобы их можно было использовать повторно… что я и сделал.

Линии лица

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

Вместо этого я решил сократить количество линий до минимума и свести их к формам, которые можно повторить с помощью фоновых изображений (градиентов). Затем с помощью одного элемента, охватывающего все лицо, я добавил эти линии одну за другой как radial-gradient или linear-gradient.

Доступность

CSS-искусство в целом не очень доступно, но это не значит, что оно не должно быть доступным. Добавив роль изображения и aria-label с описанием рисунка, рисунок станет более доступным для пользователей вспомогательных технологий.

<article role="img" aria-label="....">
  ...
</article>
Вход в полноэкранный режим Выход из полноэкранного режима

Я решил использовать <article>, потому что это самодостаточный элемент. В идеале, вместо aria-label мне следовало бы использовать aria-labelledby и поместить <h1> или <h2> с заголовком/описанием.

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

Видео кодирования в реальном времени

Весь процесс занял около трех часов, я ускорил видео на 2, так что получилось 1,5 часа видео, показывающего, как это делается шаг за шагом:

Если это слишком долго или слишком медленно, есть также видео со скоростью 8x, которое длится всего около 20 минут. 


Если вам нравятся эти видео или искусство CSS, заходите на мой канал на Youtube! Я публикую видео о CSS и живое кодирование CSS-искусства.

Оцените статью
Procodings.ru
Добавить комментарий