CSS filter свойство выглядит как ярлык стиля: одна строка поворачивает фотографию черно-белой, размывает фон или согревает миниатюру, без участия редактора изображений. Это то. Это также меняет положение браузера и накладывает элемент, к которому он применяется, поэтому фильтр, добавленный для эффекта зависания, может незаметно сломать раскрывающийся файл на расстоянии трех компонентов.
В этом руководстве рассказывается о том, что каждая функция фильтра делает со значениями пикселей, почему одни и те же функции в разном порядке создают разное изображение, как фильтры ведут себя в макете и анимации и где они стоят производительности. Он использует бесплатное Генератор фильтров CSS чтобы создать объявления, но каждый пример представляет собой простой CSS, который вы можете вставить где угодно.
TL;DR: CSS
filterсвойство применяет графические эффекты, такие как размытие, яркость, контраст, оттенки серого, сепия, насыщение, инвертирование, поворот оттенка и непрозрачность к элементу и всему, что находится внутри него, в порядке записи функций Любое значение, кромеnoneтакже создает контекст стекирования и становится блоком-содержателем для фиксированных и абсолютно позиционированных детей, что является обычной причиной & quot;мой модал застрял внутри карты & quot;. генератор CSS-фильтров Toolz строит объявление с помощью ползунков и предварительного просмотра в реальном времени, записывает только те функции, которые вы изменили, и запускает клиентскую сторону, бесплатно, без регистрации.
Что такое свойство фильтра CSS?
Свойство фильтра CSS применяет эффекты обработки изображений к элементу до того, как он будет нарисован на странице Эффект охватывает элемент's весь рендеринг: его фон, границы, текст, изображения и дочерние элементы.Он определен в W3C Модуль эффектов фильтра, уровень 1 и поддерживается во всех текущих браузерах; Ссылка MDN для фильтра перечисляет детали совместимости.
Объявление - это разделенный пространством список функций фильтра:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
Функции выполняются слева направо. каждый принимает в качестве входных данных выходные данные предыдущего, что является ключом к пониманию того, почему порядок имеет значение.
Фильтры не изменяют файл изображения. браузер применяет их каждый раз, когда рисует, поэтому оригинал остается нетронутым, и вы можете изменить или удалить эффект с помощью одной строки CSS.
Что делает каждая функция фильтра?
Каждая функция имеет значение идентичности, которое оставляет элемент неизменным Генератор Toolz использует это, чтобы сохранить вывод коротким: любая функция, оставшаяся на своем значении идентичности, опускается в CSS.
| Функция | Что делает | Идентичность | Генераторный ползун диапазон |
|---|---|---|---|
blur() |
Гауссовское размытие с заданным радиусом | 0px |
от 0 до 20px |
brightness() |
Умножает каждый цветовой канал | 100% |
от 0 до 200% |
contrast() |
Отталкивает каналы от серого или к нему | 100% |
от 0 до 200% |
saturate() |
Увеличивает или уменьшает интенсивность цвета | 100% |
от 0 до 200% |
grayscale() |
Смешивается с серым цветом одинаковой яркости | 0% |
от 0 до 100% |
sepia() |
Смешивается с теплым коричневым тоном | 0% |
от 0 до 100% |
invert() |
Перевертывает каждый канал в сторону противоположного | 0% |
от 0 до 100% |
hue-rotate() |
Вращает цвета вокруг цветового круга | 0deg |
от 0 до 360 градусов |
opacity() |
Делает элемент более прозрачным | 100% |
от 0 до 100% |
Спецификация допускает значения, выходящие за пределы некоторых из этих диапазонов, например brightness(300%). Ползунки охватывают диапазоны, которые полезны для регулировок в фотостиле; вы можете вручную ввести большее значение в свой CSS.
Спецификация также определяет drop-shadow(), который генератор не включает В отличие box-shadow, drop-shadow() следует видимой форме прозрачных изображений, таких как значки PNG, а не прямоугольной коробки 's. Для прямоугольных теней теневой путеводитель коробки охватывает более гибкое свойство.
Как цветовые фильтры изменяют значения пикселей?
Большинство цветных фильтров являются простой арифметикой на красном, зеленом и синем каналах, каждый из которых рассматривается как число от 0 до 1. Спецификация "Эффекты фильтра" определяет каждый из них как формулу или матрицу 3 на 3. Проработав над несколькими цветами, они становятся предсказуемыми.
яркость (150%) умножает каждый канал на 1,5. средне-серый из rgb (100, 100, 100) становится rgb (150, 150, 150).Снижаются значения, которые прошли бы за 255, поэтому высокая яркость смывает блики до чистого белого.
контраст (200%) применяется (значение - 0,5) × 2 + 0,5 к каждому каналу Темно-серый цвет при 0,25 (около 64) становится (0,25 - 0,5) × 2 + 0,5 = 0, чёрный Светло-серый при 0,75 становится 1,0, белым Все расходится от середины.
оттенки серого (100%) заменяет каждый пиксель серым на основе яркости, используя веса 0.2126 для красного, 0.7152 для зеленого и 0.0722 для синего. Чистый красный, rgb (255, 0, 0), становится 0.2126 × 255 = около 54, так что rgb (54, 54, 54).Чистый зеленый становится гораздо более светлым серым около 182. Вот почему преобразование в оттенках серого сохраняет ощущение, что зеленый ярче красного.
сепия(100%) смешивает каналы с тепловзвешенными коэффициентами Для красного выхода формула 0.393R + 0.769G + 0.189B.White its in as (1, 1, 1) и выходит как примерно (1.35, 1.20, 0.94), что клипсуется к rgb (255, 255, 239): белый становится слабым кремом.
Эти цифры получены в результате применения спецификации и формулы #39;s непосредственно. на экране округление и управление цветом могут перемещать результат на единицу или две.
Почему порядок функций фильтра меняет результат?
Фильтры применяются последовательно, поэтому каждая функция работает на предыдущей функции's output.When функция удаляет информацию, например, цвет удаления оттенков серого, с чем-либо, что выполняется после него, работать меньше.
Возьмите чистый синий, rgb (0, 0, 255), и нанесите оттенки серого и сепию на 100% в обоих порядках.
filter: grayscale(100%) sepia(100%);
- Сначала оттенки серого: синий имеет яркость 0,0722, поэтому пиксель становится темно-серым 0,0722 на каждом канале, примерно 18, 18, 18 rgb.
- Сепия вторая: красный становится 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, зеленый становится 0,0722 × 1,203 = 0,0869, синий становится 0,0722 × 0,937 = 0,0677.
- Результат: о ргб (25, 22, 17), очень темно-теплый коричневый.
filter: sepia(100%) grayscale(100%);
- Сначала сепия: красный становится 0,189, зеленый 0,168, синий 0,131, темно-коричневый.
- Серая шкала вторая: яркость составляет 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Результат: о ргб (43, 43, 43)нейтральный серый цвет без оттенка вообще.
Те же две функции, разный порядок, и один результат тонируется, а другой нет. Общее правило: сначала поставьте функции удаления цвета, если вы хотите, чтобы более поздняя функция тонировала результат, и последнее, если вам нужно нейтральное окончательное изображение.
Генератор всегда записывает функции в одном фиксированном порядке: размытие, яркость, контрастность, насыщенность, оттенок серого, сепия, инвертированность, оттенок-поворот, непрозрачность. так что оттенки серого всегда идут перед сепией, что дает тонированную версию. если вам нужен другой порядок, скопируйте CSS и переставьте функции вручную.
Что производят пресеты?
Генератор открывается на предустановке Vintage.Это точные объявления, которые пишет каждый предустановленный набор:
| Пресет | Сгенерированный CSS |
|---|---|
| ни один | filter: none; |
| Серый масштаб | filter: grayscale(100%); |
| Винтаж | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Теплый | filter: brightness(105%) saturate(140%) sepia(25%); |
| Круто | filter: saturate(120%) hue-rotate(200deg); |
| Драматический | filter: brightness(90%) contrast(150%) saturate(120%); |
| Увядший | filter: brightness(110%) saturate(80%) opacity(80%); |
| Инвертировать | filter: invert(100%); |
| Размытие | filter: blur(4px); |
Пресеты - это начальные точки. нажмите "Тепло", затем перетащите Blur в 2px, и выход станет filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Нажмите "Нет" или "Сбросить", и он вернется к filter: none;, йо-
Пресет Cool сильнее, чем предполагает его название: вращение оттенка на 200 градусов перемещает апельсины в сторону синего и синего в сторону оранжевого. Он читается как & quot;cool& quot; на теплых фотографиях и как тяжелый сдвиг цвета на всем остальном.
Предварительный просмотр представляет собой фиксированный образец синего, оранжевого и зеленого градиента с несколькими формами, а не с загрузкой. Он показывает, как каждая функция перемещает цвет, контраст и размытие, но всегда тестирует скопированный CSS на вашем реальном изображении, потому что фильтр, который льстит градиенту, может выглядеть грязным на тоне кожи.
Как вы строите фильтр с генератором?
- откройте фильтр CSS генератор. Все начинается на Vintage.
- Выберите предустановку, ближайшую к нужному образу, или нажмите "Нет", чтобы начать без фильтров.
- Перетащите ползунки. предварительный просмотр обновляется по мере вашего перемещения, а генерируемая строка CSS обновляется вместе с ней.
- Нажмите "Копировать CSS", чтобы разместить полную версию
filter: ...;декларация в вашем буфере обмена. - Вставьте его на селектор изображения или элемента, затем проверьте на реальной странице.
На выходе появляются только измененные функции, поэтому перемещение яркости ровно на 100% удаляет brightness() с линии вместо того, чтобы уйти brightness(100%) позади.
Почему фильтр ломает фиксированные и абсолютно расположенные элементы?
Потому что любой filter кроме none делает элемент содержащим блоком для его абсолютно и фиксированных позиционированных потомков, и создает новый контекст стекинга. спецификация Эффекты фильтра утверждает оба Это не ошибка браузера; это то, как свойство определено.
На практике это приводит к появлению двух классических ошибок.
Фиксированный модал, который не фиксирован. Нормально position: fixed помещает элемент относительно видового окна Внутри отфильтрованного предка он помещается относительно этого предка вместо этого:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Выпадающий, спрятанный под соседями. Отфильтрованный элемент становится собственным контекстом стекинга, поэтому дочерний элемент с z-index: 1000 больше не может подниматься над элементами вне карты, Он только сверху внутри карты.
Фиксации одинаковы для обоих. Примените фильтр к более узкому элементу, например img внутри карты, а не самой карты Или рендеринг модального или раскрывающегося списка вне фильтруемого элемента, что и & quot;portal& quot; компоненты в платформах пользовательского интерфейса делают.The transform свойство вызывает такое же поведение блока содержания, поэтому Руководство преобразования CSS полезно, если вы встретите эту ошибку с обоими свойствами в игре.
Как фильтры соотносятся с фоновым фильтром и непрозрачностью?
Некоторые свойства пересекаются с функциями фильтра, а правильный выбор позволяет избежать побочных эффектов.
| Собственность | Поражает | Типичное использование |
|---|---|---|
filter |
Элемент и его содержимое | Фотоэффекты, логотипы в оттенках серого, размытие изображения |
backdrop-filter |
Что бы ни было за стихией | Панели из матового стекла, размытые накладки |
opacity |
Элемент и его содержимое | Затухание элемента внутрь или наружу |
filter: opacity() |
Элемент и его содержимое | Прозрачность как часть цепочки фильтров |
mix-blend-mode |
Как элемент смешивается с тем, что за ним стоит | Цветные накладки, дуотонные эффекты |
backdrop-filter берет те же функции, что и filter, но применяет их к содержимому за элементом, что является тем, как панели стекломорфизма размывают страницу под ним. The генератор стекломорфизма строит эти декларации.
Для увядания элемента сам по себе, простой opacity это более ясный выбор. opacity() внутри цепочки фильтров полезно, когда вы уже пишете фильтр и хотите прозрачности в той же строке.
Можете ли вы анимировать CSS-фильтры?
Да. filter оживляется, а распространенным узором является логотип в оттенках серого, который при наведении курсора превращается в цвет:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
Браузер интерполирует между grayscale(100%) а none потому что none рассматривается как функции сопоставления в их значениях идентичности. Интерполяция работает чисто, когда оба состояния перечисляют одни и те же функции в одном и том же порядке. если стартовый и конечный списки различаются по порядку, результат может скакать вместо плавной анимации, поэтому запишите оба состояния в одном и том же порядке функций.
Нарушают ли CSS-фильтры производительность?
Фильтры стоят времени рендеринга, а размытие - дороже всего Браузеры обычно запускают фильтры на графическом процессоре, что делает большинство цветных фильтров дешевыми. blur() отличается: работа растет как с радиусом размытия, так и с размером области, поэтому большой радиус полноэкранного элемента, особенно того, который анимирует контент прокрутки или находится позади него, может отбрасывать кадры на более медленные устройства.
Практические пределы:
- Сохраняйте малые радиусы размытия на больших элементах и избегайте анимации самого радиуса.
- Размыть элемент меньшего размера или уменьшенное изображение, а не полностраничную обертку.
- Для движения, оживить
transformаopacity, какие браузеры обрабатывают эффективно и сохраняют фильтр статичным. - Тест на телефоне среднего класса, а не только на рабочем столе.
Общие вопросы о конкретных эффектах
Несколько эффектов возникают достаточно часто, чтобы их записать.
Черно-белое изображение: filter: grayscale(100%); Значения ниже 100% оставляют некоторый цвет, так что grayscale(50%) придает приглушенный вид.
Заглушенное фоновое изображение за текстом: filter: brightness(60%); на элементе изображения. Проверьте контраст текста после, а не угадывайте; проверка контрастности цвета дает коэффициент WCAG.
Грубый темный режим для встроенного документа или диаграммы: filter: invert(100%) hue-rotate(180deg); Инвертирование переворачивает свет и тьму, но также переворачивает оттенки к их противоположностям; вращение оттенка на 180 градусов возвращает большинство цветов к их первоначальному оттенку. Это приближение, и фотографии внутри будут выглядеть неправильно, поэтому исключите их.
Тон черно-белый: filter: grayscale(100%) sepia(60%); как описано выше.
Полный набор создателей CSS, включая текстовые тени и преобразования, находится на сайте Концентратор инструментов CSS, йо-
Генератор частный?
Да. предварительный просмотр и CSS генерируются в вашем браузере с помощью JavaScript. Ничего не загружается, нет изображения для загрузки в первую очередь, и инструмент продолжает работать в автономном режиме после загрузки страницы. Копирование CSS засчитывается в ежедневный лимит использования и записывает только то, что произошла копия.
