Установка холста
Под холстом я подразумеваю не <canvas> элемент, а холст, на котором мы будем рисовать . Это будет полезно, потому что мы можем использовать его как ссылку для наших элементов, как только он будет установлен.
Если мы будем использовать относительные единицы для холста и контента, мы фактически создадим адаптивное изображение с помощью CSS.
В качестве помощника по рисованию мы можем добавить repeating-linear-gradient для создания фоновой сетки, которая будет полезна для позиционирования элементов:
Рисование головы
Голова будет состоять из нескольких кругов и эллипсов: большой круг для лица, меньшие круги для глаз и эллипсы для щек.
Чтобы округлить объекты и сделать их круглыми или эллиптическими, мы используем border-radius значение 50% или выше.
У нас могут быть глаза и щеки внутри лица, и тогда их размер будет относительно родительского, а не холста, но пока мы оставим все на уровне холста.
Создаем круг для лица, еще один для одного глаза и эллипс для одной из щек. Затем box-shadow дублируем второй глаз и щеку:
Борода и усы
В этом разделе мы будем использовать две основные формы CSS, которые действительно полезны для рисования: овал и форму глаз для бороды и усов соответственно.
Борода уйдет за голову. Чтобы получить овальную форму, мы используем border-radiusдва значения, разделенных знаком /: одно для горизонтальной оси, а другое для вертикальной.
Рисуем шляпу
Шляпа будет единым элементом, но будет включать два псевдоэлемента: ::before и ::after.
Это удобно, потому что их размер и положение будут относиться к шляпе, и изменение одного компонента обновит все три из них одновременно. У нас может быть 3 элемента (шляпа, основа и помпон), но так мы практикуем псевдоэлементы.
Шляпа - это базовый квадрат, в одном углу которого (вверху слева) радиус границы равен 100%, что создает красивую кривизну. Помпон - это просто круг. Итак, самая сложная часть - это низ шляпы.
Для нижней части мы будем использовать форму, которую я называю трубой. Проведем его, имея площадь и добавив два значения для границы радиуса: 100% / 50%. Таким образом, верх и низ квадрата будут изогнутыми, а стороны - плоскими.
Как только у нас есть эта форма, мы добавляем вставку box-shadow сверху. Тогда у нас получится изогнутое дно. Возможно, нам придется немного повернуть его, чтобы подогнать под голову:
Форма тела похожа на колокол, который в CSS представляет собой овал с небольшими радиусами нижних углов.
Но самое интересное в теле. Мы собираемся нарисовать пояс и секцию кнопок, используя градиенты CSS: radial-gradient()и linear-gradient() соответственно.
Раздел кнопок представляет собой простой линейный градиент слева направо, использующий три цвета: прозрачный, затем белый и снова прозрачный. Оставляем небольшой процент между цветами, чтобы добавить некоторого «размытого» эффекта.
Пояс немного сложнее: это круговой (радиальный) градиент, и нам придется поиграть со значениями, чтобы расположить его именно там, где мы хотим.
Руки и руки
Руки будут представлять собой единый элемент той же формы, что и тело: колокольчик. Но этот колокол будет короче и шире. Таким образом, когда мы поместим его за корпус, он будет «перетекать» по бокам.
Добавив небольшой вертикальный градиент от прозрачного к полупрозрачному черному, руки получат некоторое цветовое расстояние от тела. Градиенты делают его похожим на тень и подчеркивают обратное положение.
Рисуем ноги
У ног будет две части: нога сама по себе и кончик ботинка (только кончик, потому что ботинок будет нарисован с линейным градиентом на самой ноге).
Мы рисуем прямоугольники для ног, немного отдаляем их друг от друга (используя соседний комбинатор братьев и сестер, который мы использовали ранее для усов), добавляем красно-черный градиент для разделения штанов и ботинок ... и слегка наклоняем их skew(), чтобы они не меняли не выглядят слишком симметрично.
На этом наш Санта закончен,но он выглядит немного грустным, просто плавая в этой серой пустоте.