CSS: изменение SVG Backgrounds

css-01-04-2018-miniCSS с каждый днем становится все мощнее, появляется множество новых особенностей, с помощью которых создавать пользовательские интерфейсы намного легче. И это замечательно!

Одной из таких фичей в CSS являются фильтры. Давайте попробуем с помощью фильтров поработать с SVG изображениями.

 

CSS filters

Для начала давайте взглянем на фильтры. Они включают в себя следующие функции:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

 

CSS-фильтры — это самый простой способ реализовать основные преобразования наиболее эффективным для браузера образом.

Если вы хотите посмотреть, как работает каждый фильтр, то рекомендуем посетить сайт: cssfilters.co.

 

Редактирование SVG backgrounds

Я люблю использовать SVG (scalable vector graphics) формат в web. SVG — отличный формат изображения для web. Когда вы добавляете SVG на страницу, то вы имеете доступ к каждому его элементу и свойству. Это позволяет добавлять анимацию, менять цвета, динамически добавлять информацию. SVG так же отлично подходит для иконок.

Часто SVG используется в качестве background изображений. В данном случае у вас пропадает контроль над элементами изображения. Вы теперь не можете изменять цвета, свойства, так как SVG становится обычной картинкой. Но с помощью CSS фильтров вы можете решить эту проблему.

 

Регулировка яркости

Первое, с чем я столкнулся при работе с иконками — это необходимость затемнения белой иконки на светлом фоне. Чтобы не создавать новую темную иконку, я воспользовался filter: brightness().

Значение brightness больше 1 делаем элемент ярче, меньше 1 делает элемент темнее.

css-01-04-2018-1

 

Выше мы добавили к иконкам filter: brightness(0.1). Вы можете осветлить иконку добавив, например, класс light с filter: brightness(100) или что-то в этом духе.

Иконки с цветом #000 или rbg(0, 0, 0) не будут осветлены. Они должны иметь любой другой цвет.

 

Регулировка цвета

Мы посмотрели, как изменить яркость иконки. Но что, если мы хотим изменить цвет иконки? В данном случае нам поможет фильтр sepia, hue-rotate, brightness и saturation, чтобы создать любой цвет, который мы хотим.

Пример:

css-01-04-2018-2

 

Из белого вы можете создать, например, синий, голубой и розовый цвет.

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

 

Совместимость

На момент написания статьи фильтры поддерживаются следующими браузерами:

css-01-04-2018-3

 

Вместо заключения

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


Оригинал статьи: ссылка
Автор статьи: Alex. Категория: CSS
Дата публикации: 01.04.2018
Ищем авторов!
[subscribe2]