Header. Svg спрайты.
HTML-код
- Опубликовано: 17 ноя 2024
- Макет проекта реализован в figma, скачать figma можно по следующей ссылке:
www.figma.com/...
Если вы ещё не умеете работать с figma и не работали в редакторе кода visual studio code, - это не проблема, я записал для вас подробные уроки:
Уроки по figma: • Figma. Учимся работать...
Уроки по visual studio code: • Visual Studio Code. На...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Макет проекта, а также готовый код с уроков вы можете скачать в вконтакте, или же в telegram:
Вконтакте: web__sk...
Telegram: t.me/web_skill...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Если есть вопросы, пишите их в комментариях, с радостью на них ответим.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/ht...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Хочешь стать Frontend разработчиком и изучить JavaScript + React ?
Советую посмотреть информацию по ссылке ниже:
webcademy.ru/j...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Также будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Вконтакте: web__sk...
Telegram канал: t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
![Kumamoto Masters Japan 2024 | Gregoria Mariska Tunjung (INA) [5] vs. Akane Yamaguchi (JPN) [2] | F](http://i.ytimg.com/vi/EIjZybhsWqA/mqdefault.jpg)
Классный, хороший урок был. Все получилось. Разобрался. И вообще дизайн проекта очень понравился . Продолжайте развиваться web skills все будет на ура.
Добрый день. Мы рады, что вам понравился данный урок 👍
Хороший урок ! до этого смотрел подобные у вас горадо лучше объяснения , спасибо !
Спасибо большое за приятные слова, я очень рада, что вам понравился данный урок.
Спасибо очень хорошее объяснение
Спасибо большое 🙂 Я рада, что вам понравилось видео 👍
спасибо за видео, все очень понятно!
подскажите пожалуйста, если в svg несколько path их так и вставлять как есть в тег g?
что если в path указаны свойства для stroke - stroke-width, stroke-linecap, stroke-linejoin? что с ними делать - тоже переносить в css и удалять из path?
если например есть два path в одной иконке, в одном указана stroke, а в другом fill - непонятно что делать?
спасибо
Здравствуйте! Очень хороший вопрос :) И так,
1 Да, все теги path добавляем внутрь тега (от слова group )
2 Да возможно, что у некоторых svg цвет прописан не через fill , а stroke . В таком случае вы удаляете только этот атрибут внутри path и переносите в css , с обозначением нужного цвета. Но, помните, что при этом надо и fill: transparent; прописать . Другие атрибуты , которые есть внутри path , выносить не надо.
3 Если внутри одного svg будут использоваться и fill у некоторых path и stroke у других path (честно скажу, я с таким не встречалась, бывало либо одно, либо другое) , в таком случае , думаю, можно прописать классы таким path (это же обычный тег, ему можно задавать класс) и через класс переносить стили заливки в css
@@Web-Skills-2024 огромное спасибо за развернутый и понятный ответ! опытным путем получилось дойти примерно до того же результата, который вы посоветовали. По поводу fill и stroke так получилось, потому что дизайнер сделал один кусочек иконки с помощью обводки, а другой кусочек заливкой. Получилось справиться с этим редактированием самой иконки. Идея с классами мне не пришла в голову, спасибо буду это тоже иметь в виду на будущее.
С помощью вашего видео у меня получилось написать свой свг спрайт, который работает, большое вам спасибо!
Я очень рада, что у вас всё получилось, вы отлично поработали 👍