Генератор CSS — Фильтр
Генератор CSS — Фильтр
сохранить | Сброс
Граница
Ширина границы PX
SolidDottedDashedDashedDashedDashedDoublehiddenridgeInsetOutset
Цвет границы
Индивидуальный
Laste Radius
All Radius PX
Top Laft
All Radius PX
В нижнем плане.
Нижний левый пикс.
Тень блока
Shadow Type OutsetInset
xy Position
Shadow Fade
Shadow Dravid
Shadow Color
Добавить больше [+]
Фон
Цвет. -yrepeat
Положение фона
ключевое слово
% (проценты)
пикселей (пикселей)
по горизонтали — xleftcenterright
по вертикали — y topcenterbottom
Горизонтальный — x %
Вертикальный — Y %
Горизонтальный — XPX
Вертикальный — Y PX
Текст Shadw +]
Градиент
Ориентациялинейнаярадиальнаяэллиптическаяповторяющаяся линейнаяповторяющаяся радиальнаяповторяющаяся эллиптическая
Размердальняя сторонадальний угол
Позициявверху слевавверху в центревверху справавлево в центрев центре справа по центру внизу слевавнизу по центру внизу справаpx px% %
PX PX
%
градуса
Start Color
Конец Цвет
Добавить стоп [+]
Трансформация
Матрица (A, B, C, D, y)
A B x B x.
C D Y
0 0 1
Индивидуальное преобразование
Вращение
Перевод XY
Переход
Добавить свойство [+]
Анимация
Play/Stop
Play/Stop
.0002 Функция LineareAseEase-Inease-in-Outease-Outcubic-Bezier
Продолжительность скорости (SEC)
Запуск задержки
COUNT1 TIME 2 TimeInfinite
Изображение фильтр
Яркости
Opacity 9000
Яркости
Opacity 9000
.
Оттенок-поворот
Инверсия
Генератор CSS — фильтр
Свойства фильтра CSS представляют собой набор нескольких стилей для настройки рендеринга изображения. Фильтры позволяют создавать эффекты изображения, такие как инструмент фоторедактора.
Оттенки серого() — преобразование изображения в оттенках серого
Размытие() — используется для уменьшения шума изображения и уменьшения детализации пикселей
Сепия() — преобразование красновато-коричневого цвета делает изображение более старым — установить интенсивность цвета на изображении
Непрозрачность() — сделать изображение прозрачным установить видимость
Яркость() — сделать изображение более светлым изображение различимо
Hue-rotate() — Оттенок в кодировках HSB/HSL RGB между 0 — 360
Invert() — установить инвертирование цветов пикселей и сделать их отрицательными.
Multiple functions can be used by comma separated
SVGs filters can be inlined in CSS
Свойство CSS filter позволяет применять графические эффекты к элементам HTML.
Эти эффекты варьируются от размытия до обработки оттенков серого , но также могут включать расширенные фильтры с использованием SVG. CSS-фильтры поддерживаются в разных браузерах и готовы к использованию. Если вы еще не играли с ними, вы должны попробовать!
Давайте посмотрим на свойство CSS filter или не стесняйтесь перейти к сегодняшнему уроку, показывающему, как встраивать фильтры SVG в CSS.
Заставить сложные фильтры SVG работать в Safari оказалось непросто (иногда они не отображались без ошибки). Я рекомендую относиться к расширенным фильтрам как к прогрессивному улучшению.
Два типа фильтров CSS
значений Для применения визуальных эффектов можно определить два разных типа значений для свойства CSS filter : функции фильтров и фильтры SVG.
Как применять функции фильтрации в CSS
Существует десять различных функций фильтрации:
-
blur -
brightness -
contrast -
drop-shadow -
grayscale -
hue-rotate -
invert -
opacity -
saturate -
сепия
Посмотрите и поэкспериментируйте с этими фильтрами, как показано ниже.
Функции фильтра можно комбинировать. Вы можете определить несколько функций фильтра в одном объявление фильтра для создания эффектов, подобных следующим. Посмотрите на эту фиолетовую красоту, которая сочетает в себе функции фильтра hue-rotate и drop-shadow . 👇
Но что, если вы хотите применить визуальные эффекты, которые не охватываются этими функциями?
Как применять фильтры SVG в CSS
В дополнение к доступным функциям фильтрации вы можете определить «более продвинутые» фильтры в SVG. SVG-фильтры очень мощные. Давайте посмотрим на пример, чтобы увидеть фильтры SVG в действии.
SVG предоставляет элементы фильтра , которые могут включать примитивы фильтра, такие как элемент feGaussianBlur . Если эти элементы фильтра включают атрибут id , на них можно ссылаться и применять к другим элементам. В этом случае элемент rect ссылается на элемент фильтра #blur для применения базового эффекта размытия.
Я не буду вдаваться в подробности создания фильтров SVG в этой статье, но если вы хотите увидеть, что возможно с filter element, я могу порекомендовать проверить yoksel.github.io/svg-filters/. Онлайн-редактор отлично показывает возможности фильтров SVG и включает в себя множество эффектов, более захватывающих, чем размытие.
Меня всегда впечатляет, когда я вижу, что возможно с фильтрами SVG.
Применение внешних фильтров SVG
Применение фильтра SVG к другим элементам SVG полезно, но становится интереснее, когда вы покидаете границы SVG и применяете фильтры к элементам HTML через CSS!
Чтобы использовать фильтр SVG в CSS, используйте ключевое слово url , определите URI, который определяет файл SVG, и сошлитесь на фильтр с идентификатором . Вот и все!
Фильтр Waves , который вы видите выше, представляет собой модифицированную версию пресетов, включенных в yoksel.github.
io/svg-filters/.
Эффект Waves демонстрирует мощь фильтров SVG. Я поражен, увидев волнистое изображение и заголовок.
Применение встроенных/встроенных фильтров SVG
Если вы не хотите загружать внешние файлы SVG, вы также можете встроить SVG в свой HTML и указать фильтр в своем CSS.
Будьте осторожны с этим подходом: кажется, что Firefox не применяет встроенные фильтры SVG, для которых установлено значение display: none (отчет об ошибке).
TIL: фильтры SVG могут быть встроены в CSS
Читая статью Матиаса «Имитация недостатков цветового зрения в Blink Renderer», я узнал изящный трюк с фильтрами SVG.
Если вы не хотите загружать внешний SVG и не хотите встраивать SVG в свой HTML, вы можете встроить фильтр SVG в CSS!
Этот трюк прекрасен, потому что вы можете определить фильтры SVG там, где вы их используете. Спасибо, что поделились этим трюком, Матиас!
PS.