Рисуем и анимируем svg-иконку в вебе | HTML, CSS
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- В видео научимся рисовать и анимировать svg-иконку.
🍀 Support the channel: www.donational...
☕️ Buy me a coffee: buy.stripe.com...
🎨 Buy my brushes for Procreate: webelart.com/i....
✍️ My telegram channel: t.me/webelart_en
🪆 Russian TH-cam: @webelart
💁🏼♀️ My instagram: / webelart
🦄 Company LinkedIn: / webelart
Демо + исходники: webelart.com/l....
Основной материал используемый при изучении рисования и анимации svg: • SVG Animation, from Sk...
Подробнее про свойства svg можно почитать здесь: css.yoksel.ru/s...
Спасибо, здорово!!!
Хороший ролик, я правда картинку не скачивал с алмазом, я нажал windows+shift+s и так сохранил, прямо с Вашего видео.
Спасибо большое за урок!! Очень пригодился, все доходчиво!))
❤️❤️❤️
Спасибо Вам большое за такой замечательный урок!
Спасибо! Вы явили нам магию. Удачи!
Лён, а добавляй таймкоды к описаниям. Хочется по быстрому понять что там соберётся по итогу, но из длинного видео выбрать нужный момент очень тяжело.
Видела как ребята такие шутки делают. Учту в длинных видео, спасибо!
Вас приятно смотреть, спасибо.
Спасибо
Умничка 😘👌👍
Спасибо! ❤️
Здравствуйте. Нужна ваша помощь. Не получается анимировать 3-линии... Если есть время напишите пожалуйста.
Спасибо за видео. Скажите пожалуйста, обязательно ли закрывать слэшем одинарные теги и описывать атрибут type в теге script? Я читал, что в современных версиях браузеров это уже не актуально.
Спасибо за комментарий.
Нет, не обязательно. В целом по стандарту можно опускать даже основные теги html, body, после браузер достраивает Но я предпочитаю соблюдать структуру, чтобы было всё логично и не было неожиданных ошибок.
У тега не всегда пишу атрибут type, не помню были ли у меня когда-то ошибки в прошлом, если не прописать type и язык бы не был понятым. Возможно такие штуки ускоряют понимание, что это js для браузера. А возможно артефакты прошлого. Но утверждать тоже не могу, т.к. никогда подобного опыта, что что-то медленно, не было.
А что скажете насчёт 'use strict' в начале скрипта - нужно или не очень?
😼
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Лена, спасибо за ролик, вопрос - а если более сложный jpeg в svg надо перевести, как нормальные люди это делают?…. Руками вот так делать неделю можно наверное :)
Честно, вот чтобы прямо jpeg перевести, то мне кажется это не особо смысл имеет, svg в этом случае становится очень тяжёлым. Я однажды пробовала ель нарисовать и то с одним цветом, вышло мегабайт кажется :D Потому что чем детализированнее объект, тем больше путей у него сохраняется. В данном случае такая штука подойдёт для более простых иконок, отлично впишется и которые на границах нарисованы.
Однако, если очень хочется сделать картинку в векторной графике, то я училась рисовать в Adobe Illustrator. Не сказать что там получается jpg, т.е. jpg - это больше для картинок, фотографий где есть куча перепадов оттенков и цветов. В векторной графике если добавлять шумы, то даже сохранить такую картину в спец программе становится тяжело. Т.е. векторная графика - это про однотонные чёткие цвета, с соединением объектов, наложением. Картинки классные кстати получаются, но более упрощённые. В целом можно попробовать заанимировать, скорее всего будет анимация например линий + растворение фона. Но для веба возможно будет тяжело и нужно будет придумывать альтернативы.
что-то в исходниках нет js файла(
Обновила. Файл добавила. Попробуйте скачать архив ещё раз, должен появиться index.js. Спасибо, что написали!
Если где-то ещё забыла добавить файл, обязательно пишите, оперативно поправлю! ❤️
@@webelart спасибо большое. нашла свою ошибку)
Благодарю