Есть макет, в котором показаны соц. кнопки в обычном состоянии, при этом в .psd макете ФШ кругленькая часть (без границы) с рисунком (птичка, буквы f, B и т.д.) сделаны одним слоем: 
В стайл-гайде показаны состояния при наведении: 
Т.е. при наведении - круглая часть (кроме рисунка) становится полностью белой. Я думал экспортировать из ФШ эту картинку (которая при наведении) и при hover просто заменять фон ей. Однако: такое показано только для твиттера. А как сделать для остальных?
Я тут вижу три пути.
Либо перерисовать нужные кнопки с нужным бэкграундом и тенями в самом ФШ, и выводить их через спрайты, либо использовать сторонние иконки применяя нужные стили через CSS,
либо использовать шрифт с иконками, и опять же стилизовать через CSS.
вот две ссылочки: https://svgporn.com/ (нет это не порнуха, это сайт с SVG иконками)
http://fontawesome.io/icons/ шрифт с иконками вместо символов. можно подключать как абсолютными,так и относительными ссылками
1 лайк
Один из вариантов - это добавлять код svg-иконки прямо в разметку. Тогда стилями отдельных частей можно управлять как угодно.
Непонятно… Это не иконки SVG, это .png (( Можно поподробнее?
Оу… Я не обратила внимания. А экспорт в формате svg из макета невозможен?
я расписал три пути решения вопроса, что именно не понятно? как вставить иконки? как их стилизовать? и еще встречный вопрос, а исходный слой изображения внутри кружков на прозрачном фоне? если да, то тут вообще можно только сменой фона обойтись.
О! Можно, а расскажите, пожалуйста, подробнее, как вставить такие изображения и как ими управлять?
Если вы экспортируете изображение в формате svg, то можете получить доступ к исходному коду иконки. Тег svg вы вставляете в html в нужное место. И можете управлять с помощью css заливкой самого svg или отдельных path.
На интенсива об этом должны были рассказывать. Разве нет?
Увы, на интенсиве об этом не рассказывали.
А курсы по svg на сайте Академии вы проходили? Там рассказано, как изменять стили фигур с помощью css и какие именно атрибуты можно переносить в css.
Да, я проходил. Но там не было таких сложных вещей! К тому же, сколько я не пытался вставить svg в html - у меня не получилось. Что-то не так вставляю.
Покажите в песочнице.
Вы знаете, мне непонятно НИЧЕГО. Точнее, смысл я понимаю, а вот как это всё реализовать - никогда с этим не сталкивался, это я довёрстываю учебный макет с базового интенсива, т.к. мой наставник исчез перед концом и я этот интенсив не прошёл. Поэтому и ищу помощи на форуме. С фотошопом - знаю только, как измерить, нарезать, экспортировать. А все творческие моменты и т.д. - нет. Насчёт макета - у меня была такая идея: сменить фон. Однако эта часть с картинкой внутри - это монолит: ну, грубо говоря, белый (не очень) кружок бумаги, в центре которого вырезаны птички/буквы и т.д. Дело в том, что в макете есть слайдер, который меняет цвет ВСЕЙ страницы. Поэтому эти птички/буквы тоже должны менять цвет. В любом случае, спасибо, что не прошли мимо )
Даже в песочнице не могу показать - в тех курсах по SVG не показана вставка. Есть просто один/несколько тегов svg и всё. А куда конкретно их вставлять, как они соотносятся с другими тегами HTML - там такое не показано. На данный момент приведу кусочек кода, где находятся эти соцкнопки, в песочнице - подскажите, пожалуйста, как с SVG сражаться. И кину на email пример какой-нибудь картинки в SVG-формате. Немного времени…
Конечно, не торопитесь.
Вот ссылка на песочницу, там весь футер: https://thimbleprojects.org/alessio18911/283167
Картинку в SVG отправил по email.
https://jsfiddle.net/AlexZaw/zecor3bd/1/
вот наваял пример с пояснениями надеюсь хоть немного поможет.
продвинутых и профи прошу строго не судить, я сам только учусь, причем самоучка, пример набрасывал по быстрому, не особо вдаваясь в детали, но получилась рабочая версия.
Спасибо Вам большое: я не обращаю внимание на то - профи или не профи. Желание помочь всегда очень ценно, от кого бы оно не исходило. Спасибо ещё раз!
Хорошо получилось. Только это всё-таки ссылка должна быть)
Ух, ты!!! Как здОрово!!! Сейчас буду разбираться, что к чему )