Периодически дизайнеры делают макеты, для которых так и хочется добавить анимацию. Например, висящие декоративные элементы просят добавить параллакс; волнам хочется добавить движение; неоновым линиям на тёмном фоне напрашивается блеск; лоадеры вообще не представляю без круговой или наполняющей заливкой фигуру без анимации.
Современный веб-сайт содержит большое количество компонентов. Даже если минималистичный дизайн, практически на любой странице встречаются множество иконок. Качественная верстка подразумевает, что некоторые иконки могут масштабироваться. В подобных случаях важно сохранить высокое качество отрисовки изображения.
Рассматриваем создание SVG-спрайтов для эффективной работы с векторными изображениями. Практические примеры встраивания спрайтов в HTML, настройка автоматизации сборки. Использование символов и элементов use, работа с внешними спрайтами и CSS-масками. Сравнение разных подходов к организации векторных ресурсов.
Как сделать цвет текста градиентом? Впервые я столкнулся с этим вопросом очень давно. И он ещё актуален, потому что для полной совместимости нужно использовать вендорные префиксы.
Мой первый рисунок на SVG. Он конечно очень простой, но это первый рисунок который я сам нарисовал на SVG и анимировал с помощью CSS, а в дальнейшем и с помощью JS. Но анимация этого кота на JS будет в соответствующем разделе.
Если вы хотите обучаться вместе со мной, то приглашаю вас на индивидуальные курсы HTML Academy: «Профессиональная вёрстка сайтов» или «Адаптивная вёрстка и автоматизация».
Просто спросите у менеджера меня — наставника Зиновьева Александра. Обучение проходит в помесячном индивидуальном формате, и вы можете начать в любое удобное для вас время.
Кроме того, в HTML Academy вы получите профессию и даже сможете устроиться на работу с новой профессией.