background

Конвертируем SVG-иконку в код для использования в CSS

В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли цвет. Для того чтобы не плодить большое количество картинок, было решено перевести svg в код и использовать в стилях CSS.

UPDATE — Не обязательно конвертировать svg в код. Можно использовать код файла svg почти без преобразований и без конверторов.

Краткая инструкция как использовать SVG в CSS

Например, у вас есть файл arrow-right.svg , внутри этого файла вот такой код:

Если конвертировать этот SVG в CSS старым способом представленным ниже, то получится такой код:

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.175 477.175'%3e%3cpath d='M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z'/%3e%3c/svg%3e");

Добавляется куча лишних действий, на выходе получаем сконвертированный код, некрасиво и долго.

Самый простой вариант — использовать код SVG напрямую в CSS.

Пример использования SVG в CSS:

background-image: url('data:image/svg+xml,\  ');

То есть, мы взяли весь код без изменения из файла arrow-right.svg и просто вставили его в background-image: url(‘ ‘); , но добавили в самое начало data:image/svg+xml, , а каждую новую строку заэкранировали обратным слешом \ .

Получается, что код SVG почти не изменен и времени это заняло 15 секунд, но нужно учесть такие моменты:

• Можно использовать многострочный svg-код, экранируя каждую строку с помощью обратного слеша — \
• Можно создавать анимированные фоны или элементы с помощью CSS-анимации внутри встроенного SVG.
• Отсутствие viewBox или размеров позволяет фону SVG занимать всю площадь элемента.
• Необходимо экранировать # как %23 при указании цвета, потому что это зарезервированный символ в URL.

Живой пример использования SVG в CSS:

See the Pen KKKRBxr by Denis (@deniscreative) on CodePen.default

Если же вас устраивает вариант с конвертацией SVG, тогда старый добрый рабочий пример представлен ниже.

Краткая инструкция как конвертировать SVG в CSS

Сначала отправляем svg в https://jakearchibald.github.io/svgomg/ для того чтобы получить кодовое значение.

Затем копируем код и вставляем его в это окно:

See the Pen Convert SVG to Data URI for css background-image by Denis (@deniscreative) on CodePen.0

полученный код используем в своем css файле.

Например, берем иконку Facebook (стандартная иконка с небольшим изменением).

На сайте https://jakearchibald.github.io/svgomg/ жмем «Open SVG» или просто перетягиваем иконку на область просмотра. В левом верхнем углу жмем «CODE», выделяем код, а затем жмем на иконку копировать, так мы получим в буфер код нашей свг-картинки.

Затем полученный код вставляем в окно выше, жмем Converte и получаем готовый background-image:

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/%3e%3c/svg%3e");

Копируем и используем его в своем css.

Чтобы изменить цвет, меняем fill=’%23FFF’ , только учитываем, что %23 — это обычный знак # , то есть fill=’%23000′ — это обычный черный (#000).

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Источник

Стилизация символов CSS с помощью Background-Clip

От автора: для создания смешанных стилей символа или текста можно использовать плагин, помогающий стилизовать текст. Несмотря на то, что концепция хороша, реализация оставляет желать лучшего, поскольку скрипты, которые будут использоваться, являются сплошным мусором, а применяемая техника — это грубое принуждение, и CSS на самом деле может делать это сам с помощью linear-gradient и background-clip!.

Проблемы

Скрипты создают дубликаты каждого символа, накладываемые друг на друга с помощью абсолютного позиционирования и overflow: hidden, чтобы обрезать части. Нннааа пппооодддоообббиииеее эээтттоооггго. Не то поведение, которое мы хотим получить.

Для скрытия частей сверху вниз нам на самом деле не нужна помощь JavaScript! Буквально просто установите линейный градиент сверху вниз, а затем установите background-clip:text (и его эквивалент -webkit)

Из-за этого не только количество скриптов во много раз больше, чем необходимо, но мы получаем еще плохо написанную чепуху, которую можно ожидать, если мы описываем, как НЕ нужно писать JavaScript, который является jQuery. Когда он был представлен 15 лет назад, это была дурацкая некомпетентная ерунда, а в 2021 году это просто тупой мусор.

На самом деле, если вам нужен «плагин», состоящий из 2k скриптов и 7k CSS для этого, что ж … наверно что-то не так. Разве что, это полностью принадлежало бы оригинальному создателю упомянутого плагина — Арбелю Акопяну — учитывая, что, когда он был написан — по всей видимости, в 2014 году — многие причудливые функции CSS, которые мы можем использовать — например, background-clip — даже не были доступны. Мир меняется.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Тем не менее, это очень похоже на беспорядок, который я ожидал от людей, пострадавших от катастрофы глупостей, таких «фреймворков», как jQuery, Angular, React, Vue и т.д.

Давайте исправим это. Все, что нам действительно нужно сделать, чтобы решить проблему, это — как я уже сказал — применить background-style и background-clip.

Обратите внимание: весь следующий код предполагает, что используется сброс. Например, линейный градиент сверху вниз:

Источник

background

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

= [background-attachment || background-image || background-position || background-repeat] | inherit

= [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.

Значения

Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

        
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник