CSS с каждый днем становится все мощнее, появляется множество новых особенностей, с помощью которых создавать пользовательские интерфейсы намного легче. И это замечательно!
Одной из таких фичей в 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 делает элемент темнее.
Выше мы добавили к иконкам filter: brightness(0.1). Вы можете осветлить иконку добавив, например, класс light с filter: brightness(100) или что-то в этом духе.
Иконки с цветом #000 или rbg(0, 0, 0) не будут осветлены. Они должны иметь любой другой цвет.
Регулировка цвета
Мы посмотрели, как изменить яркость иконки. Но что, если мы хотим изменить цвет иконки? В данном случае нам поможет фильтр sepia, hue-rotate, brightness и saturation, чтобы создать любой цвет, который мы хотим.
Пример:
Из белого вы можете создать, например, синий, голубой и розовый цвет.
.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);
}
Совместимость
На момент написания статьи фильтры поддерживаются следующими браузерами:
Вместо заключения
Никогда не забывайте о своих пользователях. Пока что фильтры работают не везде. Поэтому не используйте белые иконки с фильтрами на белом фоне, так как некоторые пользователи просто ничего не увидят. Так же не забывайте про альтернативный текст у изображений.
Оригинал статьи: ссылка
