SVG, большой гайд
HTML-код
- Опубликовано: 1 окт 2024
- Друзья, записал для вас гайд по svg. Вам обязательно нужна будет эта база для дальнейшего развития в svg анимации. Как говорится, сложный макет - это простой макет, в котором много сложных мелких деталей, часто эти детали можно решить, если вы имеете хорошую базу по svg.
clip в css - bennettfeely.c...
svg-path - yoksel.github....
размеры в svg - yoksel.github....
машинка - codepen.io/yok...
SVG или иконочный шрифт:
• SVG или иконочный шриф...
Телеграм канал:
t.me/from0to1com
Сайт курса по верстке - from0to1.com.ua/
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
8:22 Рисование прямоугольника.
13:34 Рисование круга.
15:20 Рисование овала.
17:08 Рисование многоугольника.
21:55 Рисование линии.
23:26 Рисование ломаной линии.
28:08 Рисование кривой, Figma.
Вадим хотел нарисовать 卍 , когда показывал polyline
Привет! Рад что ты снова с нами! Можешь пожалуйста сделать видео по оптимизации сайта, для pagespeed? )
окей)
Инфы канешн не дуже насыщено, но лайкос впаял чуваку чисто за базар!!! Ни в коем случае не переходи на "нормальную" речь))) Бакланишь шедеврально!!!
З.Ы. Сделай, еслли шаришь видос про зум, очень мало инфы про ЭТО
Молодчина ти, Вадим!!! Класно все розповідаєш і видно, що розумний ти хлопець!!!
Ще таке питання, контент українською мовою буде?
Спасибо огромное! Даже в невероятных условиях войны, ты продолжаешь вкладывать силу и энергию в обучение.
Нет слов. Дякую
спасибо
Брат как у вас там в Украине? Я из Кыргызстана. Как вы там? насколько тяжело стала жить после войны?
просто Россия воюет не так как Израиль
@@sshcvc откуда ты выползло ? залазь обратно
@@ligat-rome жил в Николаеве , взорвало соседний дом снарядом
переехал в Одессу , а тут шахеды летают по ночам постоянно + вижу как их сбивают ( я у моря живу и тут очень хорошая видимость всего этого )
Ждем такой же курс по Canvas!
Не смог не написать ваша подача лучшая, самая лучшая правда
@@ricardo_milos1977 спасибо
Нарисовал SVG рамку во весь экран. Уменьшаю экран браузера, а рамка обновляется/уменьшается только после того как нажму обновление страницы. Почему?
крутое и понятное видео, спасибо большое!
очень надеюсь на разборы разных сложных анимаций и всяких идей, раз уж вы с анимацией работали)
Вадим не могу открыть макет из предыдущего ролика на Фигме, так как случилось так что я живу в рф, его можно в Фотошопе открыть? Сам пробовал не получилось!
макеты из фигмы в фотошопе не открыть
Какую тему в vscode ты используешь?
В целом хорошее видео. Но не сказано ни слова об анимации в непосредственном коде svg без css. И тишина относительно градиентной заливки. Всё остальное отлично.
Блин а я тупо не могу найти как прописать в html скачанный свг при нажатии на который я переходил бы по ссылке. Ни типа навигационная панель домой, поиск, контакты и ТД.
пару раз видел на сайтах в зависимости от скролла плавали буквы по кривой линии. это через svg делается?
На главных страницах некоторых больших интернет магазинов всякие пнг и жпг хотя там место свг. Аш глазам больно
Что там нажимаешь в Figme? Область мне нужно отдельно область чтобы менялась нихатыж а надобно шас
Спасибо.
спасибо, полезно! жду в дальнейшем видосы с более сложными примерами анимации из реальных проектов)
отлично
ну svg похож на canvas но в canvas можно не только вектор рисовать но и растр
Вот это подгон,спасибо. Ещё очень хотелось бы увидеть видео про обновлённую сборку GULP
в плана есть обновление сборки
Тогда с нетерпением ждём)
@@РоманЛебедев-о3э зачем в 2022 году нужен галп?
@@Евгений-х4л2щ а почему в 22 году галп не нужен?
@@РоманЛебедев-о3э я не говорил что он не нужен. Я просто спросил почему он ещё используется, чем он лучше чем Парсел или Вит
Я кажется влюбляюсь в Вашу работу! Сердечное спасибо 💛
Спасибо Вадим. Здоровья и Мирного неба Вам и вашей семье.
Что за шрифт у тебя в VS Code?
Вадим, в телеграме бываете? ))
Иду с работы,смотрю в телефоне.Неудобно,надо быстрей домой к ноутбуку.
Кажется я уже почти знаю как мне нарисовать одну заковыристую кнопку
круто
Крутой гайд, спасибо
Спасибо,как всегда на высоте,много информации и позитива.Какой мак юзаешь.Для задач верстальщика,фронтендера удобно использовать?,или есть ньюансы
SVG-блокбастер, не иначе! спасибо, Вадим, все по полочкам, реально много любопытного для меня! добавила филл на svg палец под видео. вот бы еще видос с версткой макета и более-менее сложной svg-анимацией по мотивам твоих реальных проектов ))
еще drag and drop итересно
Ай молодец! Спасибо за труд.
Привет, жду стрим по продвинутой верстке)
Спасибо за все
Вадим, как тебе идея записать видос про полную работу на фрилансе. От поиску заказа до сдачи. Очень полезно будет для новичков
заказчику это не понравится, он не хочет чтобы все знали стоимость заказа, как я с ним общался, и видели как я создавал сайт, а без пруфов и цифр это не интересно
На тебе лайк
Як вам бредова ідея створити дизайн сайту на svg, самі ж кажете, навіщо обмежуватися базой
Спасибо
Спасибо большое! Было приятно смотреть!
Лучший)
Оце я розумію крутий урок👍💪💪.Було би круто якби ти зробив уроки по JS, jQuery і по WP:)))
у меня новая версия ютуба и ночная тема у меня кнопка подписатса серая
аааа, паника паника=)
Урраааа!
Спасибо за ТОП контент 🥳
Что за напиток пьешь????Все имеет значение))))
кипяченую, воду надо кипятить, а то кто знает что в ней плавает
Если svg содержит id внутри себя, то если эта svg используется несколько раз на странице, html-валидатор будет ругаться, что несколько одинаковых id на странице
просто ох@@@ваю насколько полезный канал
спасибо, ну у меня много видосов которые прокачают
svg из Font Awesom можно качать и вставлять в свой сайт без лицензии?
для меня inkskape удобнее для работы с SVG , чем figma
Очень круто объяснено. Спасибо. Хорошо что зашел на эту вечеринку
Меня так разрывало, когда он говорил "вечеринка"🥳🥳🥳 приятный чел
Опять я провафлил транслейшн((
p.s. Сегодня еще и футбол. Не проспать бы
Дякую за відео. Єдине прохання на майбутні відоси: якщо матимете також цікаві англомовні статті по темі - кидайте, будь ласка, лінк і на них, бо дуже не хочеться послуговуватися росконтеном.
какая тема для иконок vscode
стоит, скажите пожалуйста?)
Прекрасный материал, большое спасибо!
Но остался один вопрос..мне все таки неясно зачем было заходить в фигму и менять размеры яблока, а потом ещё делать изменения в тегах в программе... Нельзя ли просто было изменить параметр wight в стилях css?
Спасибо, мне кажется видео приобрели более высокий уровень
спасибо
Спасибо за такое информативное видео! Шрифт супер как называеться?
Вадим такой вопрос. Эти сайты, что мы делаем на марафонах можно вставлять в резюме?
дай бог тебе место в вальхале
Величезне Вам дякую! Дуже корисне відео!)
видос ваще топовый!!! пасиб
пойду ещё раз пересмотрю про маски
Ну это царский ролик вышел
спасибо....думала сложно, по другим видео, но вроде все не сложна))
Аааааа, ура, то что надо, обязательно посмотрю. Лайк!
Вообще богато! Появилось понимание как работать с svg. Благодарочка!
Насчёт тега clipPath, думаю, что в таком случае лучше использовать css свойство mask-image, оно попроще будет, а результат тот же
Спасибо!
Будьте здоровыми!
А про теги pattern, defs, use и т.д. хотелось бы услышать)
спасибо! очень полезный ролик!))) толково всё! многое стало на свои места!)))
на одном дыхании смотрится! будь здоров!!!
Просто огромное человеческое спасибо!
Максимально доступно и информативно 🤘😎
Самый приятный контент в этой сфере.
Супер.... Дякую за пояснення.
Шикарно!!!! Просто и доступно все разъяснил. Спасибо большое!!! Мир вам!!
Отличное видео!
Хотелось бы увидеть как делать выпадающее меню
Мега круто! Спасибо !
"По центру пацанёныша" 🤣 Можно смотреть видосы просто ради этих фраз
Спасибо
Хорошие у вас уроки. Делайте шрифт крупнее, на экране с высоким разрешением приходится напрягать глаза
буду стараться, спасибо
да, братан, препод из тебя так-себе... Готовься лучше, ставь речь, ато много лишних мусорных слов.
спасибо за видео
Спасибо большое
Крутой видос. Ждём более сложные анимации с применением js. Маски возможно необычные покажешь для изображений. Спасибо!
Шо такое SVG?
Спасибо, очень полезно
Нереально крутой гайд! Низкий поклон и жирный лайк.
благодарю
полноценно и быстро. было приятно смотреть
Дякую!
Дякую !
дякую
Круто!
Не вероятно крутой преподаватель!!!!!!!
спасибо
Спасибо Вадос за твои труды!😁 Ты всегда будешь у нас в авторитете!😏😁
Огромное спасибо за отличный урок и практику!
"Ламаная" линия- линия которую поломали ))))))👍
23.38 топчик))
Красава
Урааа, спасибо
I'm first 🤠
красава
Спасибо, будем изучать!
супер
Спасибо большое за гайд!
Супер! Дякую.
дякую
Ты лучший
спасибо)