От автора: CSS становится мощнее. Благодаря функциям типа CSS Grid и пользовательским свойствам (или CSS переменным), мы видим, как развиваются действительно креативные решения. Мы до сих пор не знаем всех возможностей CSS, которые могут упростить написание UI, и это удивительно!
Среди этих возможностей сейчас одна из моих любимых в CSS: фильтры. Давайте узнаем, как с помощью фильтров можно решить проблему, с которой вы могли сталкиваться при работе с SVG, как с фоновым изображением на элементе — а именно, научимся настраивать фон SVG под актуальные потребности.
CSS фильтры
Начнем с обзора фильтров. Фильтры включают следующие функции:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
Эти эффекты можно имитировать с помощью SVG фильтров и WebGL шейдеров, но CSS фильтры – это самый легкий способ реализации базовых трансформаций наиболее эффективным для браузера способом. Это сокращения от SVG фильтров, поэтому можно использовать filter: url() и указать ID фильтра на любой элемент. Рекомендую посетить cssfilters.co, если хотите поиграться с кастомными фильтрами.
Проблема: редактирование SVG фонов
Я обожаю использовать SVG формат (масштабируемая векторная графика) в веб-дизайне. SVG – замечательный формат изображений для веба. В его основе лежит код, поэтому он позволяет использовать высоко адаптивный и интерактивный контент. При вставке SVG на страницу вам доступны все его внутренние элементы и их свойства. Вы можете анимировать их, обновлять значения (например, цвет) и динамически вставлять дополнительную информацию. SVG отлично подходит для иконок, особенно вместо шрифтов-иконок. Он отлично подходит для маленьких UI элементов из-за высокого качества (ретина экраны) и маленького размера изображений (производительность).
Я часто замечаю, когда SVG используется для таких маленьких элементов или для больших областей иллюстраций, для простоты оно подключается как фоновое изображение. Минус такого подхода в том, что вы, как разработчик, больше не можете контролировать SVG. Вы не можете настраивать отдельные свойства, например, цвет заливки SVG фона, так как оно воспринимается как любое другое изображение. Эту цветовую головоломку можно решить с помощью CSS! Здесь нам помогут фильтры!
Настройка яркости
Первый раз я столкнулся с проблемой с SVG фоном, когда работал над сайтом с белыми SVG иконками социальных сетей, который были расположены на фоне, подходящем под приложение. Когда эти иконки переносились на белый фон, их не было видно. Вместо создания новых иконок или изменения разметки для вставки инлайн SVG можно использовать filter: brightness().
Фильтр brightness и значение большее 1 делает элемент ярче, а значение меньшее 1 делает его темнее. То есть мы можем сделать те SVG иконки темнее и наоборот!
Что я сделал сверху: я создал класс dark со свойством filter: brightness(0.1). Для темных иконок можно сделать противоположный эффект. Иконки можно осветлить, создав класс light с чем-то типа filter: brightness(100) или другим подходящим значением.
Иконки с цветом заливки #000 или rgb(0,0,0) не будут осветлены. Значение должно быть больше 0 в любом rgb канале. fill: rgb(1,1,1) отлично работает со значениями высокой яркости типа brightness(1000), но на чистом черном даже brightness(1000) не сработает. Это не проблема с яркими цветами и белым.
Настройка цвета
Теперь мы знаем, как настраивать яркие и темные значения с помощью фильтра brightness(). Но это не всегда дает желаемый эффект. Что делать, если в иконки нужно добавить цвет? Это можно сделать с помощью CSS фильтров. Небольшой хак – можно использовать фильтр 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);
}
Вы ограничены только фантазией. SVG – это лишь один пример использования нескольких фильтров. Их можно применять к любым медиа типам – изображения, gif, видео, iframe и т.д. Поддержка очень хорошая:
В завершение нужно сказать, что нельзя забывать о пользователе! Фильтры не будут работать в IE, поэтому дайте всем своим пользователям видимое сообщение (т.е. не используйте белый SVG с примененным фильтром на белом фоне, так как пользователи IE ничего не увидят). Для доступности иконок не забывайте использовать альтернативный текст, и вы будете использовать эту технику в своих приложениях!
Автор: Una Kravets
Источник: https://css-tricks.com/
Редакция: Команда webformyself.