brightness() в CSS


Содержание

Притормози, дружище

Проходить главу «Кекстаграм: Начало. CSS-фильтры» можно после оформления подписки.

Консультация по телефону 8 800 555-86-28 .

Курсы

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

CSS filter Property

Example

Change all images to black and white (100% gray):

Tip: More «Try it Yourself» examples below.

Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often ).

Default value: none
Inherited: no
Animatable: yes. Read about animatable
Version: CSS3
JavaScript syntax: object.style.WebkitFilter=»grayscale(100%)» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

Note: Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard «filter» property that has been deprecated. This was mostly used for opacity when needed support from IE8 and down.

CSS Syntax

Tip: To use multiple filters, separate each filter with a space (See «More Examples» below).

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Filter Description Play it
none Default value. Specifies no effects Play it »
blur(px) Applies a blur effect to the image. A larger value will create more blur.

If no value is specified, 0 is used. Play it » brightness(%) Adjusts the brightness of the image.

0% will make the image completely black.
100% (1) is default and represents the original image.
Values over 100% will provide brighter results. Play it » contrast(%) Adjusts the contrast of the image.

0% will make the image completely black.
100% (1) is default, and represents the original image.
Values over 100% will provide results with more contrast. Play it » drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image.

Possible values:
h-shadow — Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow — Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur — Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow’s edge is sharp).

spread — Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color — Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:

filter: drop-shadow(8px 8px 10px red);

Tip: This filter is similar to the box-shadow property. Play it » grayscale(%) Converts the image to grayscale.


0% (0) is default and represents the original image.
100% will make the image completely gray (used for black and white images).

Note: Negative values are not allowed. Play it » hue-rotate(deg) Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.

Note: Maximum value is 360deg. Play it » invert(%) Inverts the samples in the image.

0% (0) is default and represents the original image.
100% will make the image completely inverted.

Note: Negative values are not allowed. Play it » opacity(%) Sets the opacity level for the image. The opacity-level describes the transparency-level, where:

0% is completely transparent.
100% (1) is default and represents the original image (no transparency).

Note: Negative values are not allowed.
Tip: This filter is similar to the opacity property. Play it » saturate(%) Saturates the image.

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

Note: Negative values are not allowed. Play it » sepia(%) Converts the image to sepia.

0% (0) is default and represents the original image.
100% will make the image completely sepia.

Редактирование изображений в CSS: Фильтры

Представьте ситуацию, когда вам нужно иметь на сайте высококонтрастную, размытую и яркую версии одного и того же изображения. До появления фильтров в CSS вы могли либо загрузить несколько версий изображения, либо манипулировать с изображениями с помощью JavaScript.

Фильтры CSS предоставляют простой способ решения этой задачи. Давайте кратко рассмотрим все доступные фильтры.

Фильтр blur

Этот фильтр применяет к изображениям гауссово размытие. Фильтр принимает значение length, которое определяет, сколько пикселей нужно смешать друг с другом. Большее значение даст большее размытие. Радиус размытия нельзя указывать в процентах. Если значение не указано, по умолчанию используется радиус 0. Синтаксис этого фильтра:

Фильтр blur() не принимает отрицательных значений.

Фильтр brightness

Этот фильтр применяет к изображениям линейный множитель, делая их ярче или тусклее по сравнению с оригинальным изображением. Он принимает как числовое, так и процентное значение. При 0% вы получите полностью черное изображение, на 100% вы получите исходное изображение без каких-либо изменений. Более высокие значения приведут к более ярким изображениям. Достаточно высокое значение сделает изображение практически белым. Синтаксис этого фильтра:

Фильтр не принимает отрицательных значений.

Фильтр contrast

Этот фильтр изменяет контрастность изображения. Также как фильтр brightness, он принимает как число, так и процентное значение. При 0% результат будет полностью серым, значение 100% не даст никакого эффекта, значения больше 100% сделают изображение более контрастным. В фильтр contrast() нельзя передавать отрицательные значения. Синтаксис фильтра:

Фильтр box-shadow

Почти все уже использовали свойство box-shadow хотя бы раз. Проблема box-shadow в том, что оно применяется к блоку, с помощью него нельзя создать тень произвольной формы. Фильтр drop-shadow создает тень вокруг изображения. Это в основном размытая версия альфа-маски основного изображения. Синтаксис фильтра:

Первые два значения length обязательны, они указывают горизонтальное и вертикальное смещение тени. Третий параметр (радиус размытия) не обязательный, большее значение создает более светлую тень. На демо ниже показан фильтр в действии. Если вы наведете мышкой на пингвина, цвет тени изменится с оранжевого на красный.

Фильтр grayscale

Этот фильтр делает изображение черно-белым. Значение 0% в качестве параметра не изменит изображение, значение 100% сделает его полностью черно-белым. Значение между 0% и 100% задает степень применения этого эффекта. Фильтр grayscale() не принимает отрицательных значений. Синтаксис фильтра:

Фильтр hue-rotate

Фильтр применяет к изображению поворот оттенка. Параметр фильтра определяет угол на цветовом круге, на который должно быть повернуто изображение. При 0deg изображение не будет изменено, при 360deg фильтр сделает полный оборот. Синтаксис фильтра:

Фильтр invert

Фильтр инвертирует изображение. Величину инверсии определяет переданный параметр. При 0% мы получим то же изображение без изменений, при 100% — полностью инвертированное изображение, при 50% — полностью серое изображение. Любое значение между 0% и 100% будет означать степень инверсии. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Фильтр opacity

Фильтр opacity применяет прозрачность к исходному изображени. Значение параметра 0% сделает изображение полностью прозрачным, 100% — полностью непрозрачным.

Фильтр похож на свойство opacity в CSS. Разница в том, что для фильтра некоторые браузеры могут использовать аппаратное ускорение для увеличения производительности. Синтаксис фильтра:

Фильтр saturate

Этот фильтр изменяет насыщенность изображения. Насыщенность задается передаваемым параметром. Фильтр не принимает отрицательные значения. При 0% (минимальное допустимое значение) изображение становится полностью не насыщенным, при 100% — получаем исходное изображение. Чтобы получить более насыщенное изображение, необходимо передать значение, большее 100%. Синтаксис:

Фильтр sepia

Фильтр преобразует оригинальное значение в сепию. Значение параметра 100% полностью преобразует изображение, 0% не даст никакого эффекта. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Фильтр url

Могут возникнуть случаи, когда вам понадобится применить собственные фильтры к изображению. Фильтр url позволяет применить произвольный SVG фильтр. В качестве параметра фильтр принимает как путь к файлу с фильтром, так и идентификатор элемента на странице. Пример постеризации изображения:

Результат применения этого фильтра:


Применение нескольких фильтров

Если вас не устраивает результат какого-то одного фильтра, вы можете комбинировать их. Порядок, в котором вы будете применять фильтры влияет на результат. Несколько фильтров к одному изображению можно применить следующим способом:

Когда вы применяете вместе несколько фильтров, первая функция применяется к исходному изображению, остальные — к результату предыдущей функции. Демо показывает комбинацию фильтров в действии.

В некоторые случаях разный порядок фильтров может приводить к совершенно разному результату. Например, использование sepia() после grayscale() преобразует изображение в сепию, а использование grayscale() после sepai() сделает его черно-белым.

Анимация фильтров

Свойство filter может быть анимировано. При правильном сочетании из0ображения и фильров можно добиться потрясающих результатов. Рассмотрим фрагмент кода ниже:

Я использовал фильтры hue-rotate() и brightness() вместе, чтобы добиться эффекта дня и ночи. На 20% анимации я увеличиваю яркость, оставляя оттенок без изменения, чтобы создать эффект солнечного дня. К конце анимации я поворачиваю оттенок на 180 градусов. В результате получаю синее изображение. В сочетании с очень низкой яркостью, это создает эффект ночи.

Заключение

Помимо 11-ти фильтров, о которых мы говорили выше, существует также фильтр custom(). Он позволяет создавать совершенно разные эффекты с помощью шейдеров. Есть несколько проблем с этим фильтром, которые приостановили его развитие. Компания Adobe активно работает, чтобы придумать решения этих проблем. Надеюсь, скоро фильтр custom() можно будет использовать в своих проектах.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Как уменьшить яркость изображения в CSS

Я хочу уменьшить яркость изображения в CSS. Я искал много, но все, что у меня есть, это о том, как изменить непрозрачность, но это делает изображение более ярким. кто-нибудь может мне помочь ?

10 ответов:

функция, которую вы ищете, это filter . Он способен делать целый ряд эффектов изображения, в том числе яркость:

обратите внимание, что это то, что только совсем недавно входит в CSS в качестве функции. Он доступен, но большое количество браузеров там еще не будет его поддерживать, а те, которые его поддерживают, потребуют префикса поставщика (т. е. -webkit-filter: , -moz-filter и т. д.).

это также можно сделать эффекты фильтра, как это с помощью SVG. Поддержка SVG для этих эффектов хорошо зарекомендовал себя и широко поддерживается ( Спецификации фильтра CSS были взяты из существующих спецификаций SVG)

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

если ничего из этого не работает для вас, вы могли бы использовать существующий opacity функция, но не так, как вы думаете: просто создайте новый элемент с твердым темным цветом, поместите его поверх ваш образ, и исчезают его с помощью opacity . Эффект будет заключаться в том, что изображение позади будет затемнено.

наконец, вы можете проверить поддержку браузером filter здесь.

надеюсь, что это поможет.

ОП хочет уменьшить яркость, а не увеличить его. Непрозрачность делает изображение ярче, а не темнее.

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

короче говоря, поместите черный цвет позади изображения и уменьшите непрозрачность. Вы можете сделать это, обернув изображение в div, а затем понизив непрозрачность изображения.

вы могли бы использовать:

С CSS3 мы можем легко настроить изображение. Но помните, что это не меняет имидж. Он отображает только скорректированное изображение.

см. следующий код для получения более подробной информации.

чтобы сделать изображение серым:

чтобы дать сепии взгляд:

для настройки контрастности:

чтобы размыть изображение:

Я нашел это сегодня. Это действительно помогло мне. http://www.propra.nl/playground/css_filters/

все, что вам нужно, это добавить это в свой стиль css.:

вы можете использовать css фильтры, ниже и пример для web-kit. пожалуйста, посмотрите на этот пример: http://jsfiddle.net/m9sjdbx6/4/

у меня есть это классное решение: https://jsfiddle.net/yLcd5z0h/

попробуйте это, если вам нужно преобразовать изображение в черно белое:

CSS brightness() Function

Use the brightness() function to adjust the brightness of an image.

The CSS brightness() function is used with the filter property to adjust the brightness of an image. The function applies a linear multiplier to input image, making it appear more or less bright.


The brightness() function requires an argument to be passed to it. This argument determines the brightness level that’s applied to the image. The argument can be either a percentage value or a number.

Using Percentages

Here’s an example using a percentage value to make the image less bright:

Here’s an example using a percentage value to make the image brighter:

Using Numbers

Here’s an example using a number:

Official Syntax

The official syntax of the brightness() function is as follows:

Possible Values

The brightness() function accepts a number or percentage as its argument. This argument determines the brightness level of the image.

A value of 0% results in an image that’s completely black. A value of 100% results in an image that’s unchanged. Any amount over 100% produces a brighter image.

A number value of 0.5 has the same effect as the percentage value 50% . A value of 1 is the same as 100% .

Brightness() в CSS

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами — это filter.

Как и следовало ожидать, для этого свойства требуется использование префикса браузера. Но на данный момент, только -webkit- (Chrome и Safari) является единственным движком браузеров, поддерживающим это свойство.

Фильтрация

Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur:

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

Яркость

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

Насыщенность

Насыщенность измеряется в процентах.

Поворот тона

Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.

Контрастность

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

Обесцвечивание

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% — это будет завершенная сепия, 0% — исходное изображение.

Поддержка браузерами

Webkit Mozilla Trident Presto
Размытие Экспериментальная Нет Нет Нет
Яркость
Насыщенность
Поворот тонов
Контрастность
Инверсия Только полная инверсия
Обесцвечивание Экспериментальная
Sepia

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом


How to Decrease Image Brightness in CSS

I want to decrease image brightness in CSS. I searched a lot but all I’ve got is about how to change the opacity, but that makes the image more bright. can anyone help me ?

11 Answers 11

The feature you’re looking for is filter . It is capable of doing a range of image effects, including brightness:

Note this is something that’s only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won’t support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter: , -moz-filter , etc).

It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)

Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).

If none of that works for you, you could still use the existing opacity feature, but not the way you’re thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity . The effect will be of the image behind being darkened.

Finally you can check the browser support of filter here.

Как уменьшить яркость изображения в CSS

Я хочу, чтобы уменьшить яркость изображения в CSS. Я искал много, но все, что я получил о том, как изменить непрозрачность, но что делает изображение более ярким. Может кто-нибудь мне помочь ?

Функция вы ищете это filter . Он способен делать выбор графических эффектов, включая яркость:

Обратите внимание , это то , что это только совсем недавно входя в CSS в качестве признака. Он доступен, но большое количество браузеров не будет поддерживать его еще и те , которые поддерживают это потребуется префикс поставщика (то есть -webkit-filter: , -moz-filter и т.д.).

Кроме того, можно сделать эффекты фильтра, как это с помощью SVG. Поддержка SVG этих эффектов хорошо известна и широко поддерживается (в CSS фильтр спецификация была взята из существующей SVG спецификации)

Также обратите внимание , что это не следует путать с фирменным filter стилем доступен в старых версиях IE (хотя я могу предсказать , проблемы с пространством имен столкновения , когда новый стиль падает его префикс поставщика).

Если все это не работает для вас, вы можете по- прежнему использовать существующую opacity функцию, но не так , как вы думаете: просто создать новый элемент с твердым темным цветом, поместите его на верхней части вашего изображения, и постепенно исчезать с использованием opacity . Эффект будет изображения за темными.

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

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

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

CSS filters

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

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, чтобы создать любой цвет, который мы хотим.

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

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

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

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

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

Оригинал статьи: ссылка Автор статьи: Alex. Категория: CSS
Дата публикации: 01.04.2020

Редактирование изображений в CSS: Фильтры


Представьте ситуацию, когда вам нужно иметь на сайте высококонтрастную, размытую и яркую версии одного и того же изображения. До появления фильтров в CSS вы могли либо загрузить несколько версий изображения, либо манипулировать с изображениями с помощью JavaScript.

Фильтры CSS предоставляют простой способ решения этой задачи. Давайте кратко рассмотрим все доступные фильтры.

Фильтр blur

Этот фильтр применяет к изображениям гауссово размытие. Фильтр принимает значение length, которое определяет, сколько пикселей нужно смешать друг с другом. Большее значение даст большее размытие. Радиус размытия нельзя указывать в процентах. Если значение не указано, по умолчанию используется радиус 0. Синтаксис этого фильтра:

Фильтр blur() не принимает отрицательных значений.

Фильтр brightness

Этот фильтр применяет к изображениям линейный множитель, делая их ярче или тусклее по сравнению с оригинальным изображением. Он принимает как числовое, так и процентное значение. При 0% вы получите полностью черное изображение, на 100% вы получите исходное изображение без каких-либо изменений. Более высокие значения приведут к более ярким изображениям. Достаточно высокое значение сделает изображение практически белым. Синтаксис этого фильтра:

Фильтр не принимает отрицательных значений.

Фильтр contrast

Этот фильтр изменяет контрастность изображения. Также как фильтр brightness, он принимает как число, так и процентное значение. При 0% результат будет полностью серым, значение 100% не даст никакого эффекта, значения больше 100% сделают изображение более контрастным. В фильтр contrast() нельзя передавать отрицательные значения. Синтаксис фильтра:

Фильтр box-shadow

Почти все уже использовали свойство box-shadow хотя бы раз. Проблема box-shadow в том, что оно применяется к блоку, с помощью него нельзя создать тень произвольной формы. Фильтр drop-shadow создает тень вокруг изображения. Это в основном размытая версия альфа-маски основного изображения. Синтаксис фильтра:

Первые два значения length обязательны, они указывают горизонтальное и вертикальное смещение тени. Третий параметр (радиус размытия) не обязательный, большее значение создает более светлую тень. На демо ниже показан фильтр в действии. Если вы наведете мышкой на пингвина, цвет тени изменится с оранжевого на красный.

Фильтр grayscale

Этот фильтр делает изображение черно-белым. Значение 0% в качестве параметра не изменит изображение, значение 100% сделает его полностью черно-белым. Значение между 0% и 100% задает степень применения этого эффекта. Фильтр grayscale() не принимает отрицательных значений. Синтаксис фильтра:

Фильтр hue-rotate

Фильтр применяет к изображению поворот оттенка. Параметр фильтра определяет угол на цветовом круге, на который должно быть повернуто изображение. При 0deg изображение не будет изменено, при 360deg фильтр сделает полный оборот. Синтаксис фильтра:

Фильтр invert

Фильтр инвертирует изображение. Величину инверсии определяет переданный параметр. При 0% мы получим то же изображение без изменений, при 100% — полностью инвертированное изображение, при 50% — полностью серое изображение. Любое значение между 0% и 100% будет означать степень инверсии. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Фильтр opacity

Фильтр opacity применяет прозрачность к исходному изображени. Значение параметра 0% сделает изображение полностью прозрачным, 100% — полностью непрозрачным.

Фильтр похож на свойство opacity в CSS. Разница в том, что для фильтра некоторые браузеры могут использовать аппаратное ускорение для увеличения производительности. Синтаксис фильтра:

Фильтр saturate

Этот фильтр изменяет насыщенность изображения. Насыщенность задается передаваемым параметром. Фильтр не принимает отрицательные значения. При 0% (минимальное допустимое значение) изображение становится полностью не насыщенным, при 100% — получаем исходное изображение. Чтобы получить более насыщенное изображение, необходимо передать значение, большее 100%. Синтаксис:

Фильтр sepia

Фильтр преобразует оригинальное значение в сепию. Значение параметра 100% полностью преобразует изображение, 0% не даст никакого эффекта. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Фильтр url

Могут возникнуть случаи, когда вам понадобится применить собственные фильтры к изображению. Фильтр url позволяет применить произвольный SVG фильтр. В качестве параметра фильтр принимает как путь к файлу с фильтром, так и идентификатор элемента на странице. Пример постеризации изображения:

Результат применения этого фильтра:

Применение нескольких фильтров

Если вас не устраивает результат какого-то одного фильтра, вы можете комбинировать их. Порядок, в котором вы будете применять фильтры влияет на результат. Несколько фильтров к одному изображению можно применить следующим способом:

Когда вы применяете вместе несколько фильтров, первая функция применяется к исходному изображению, остальные — к результату предыдущей функции. Демо показывает комбинацию фильтров в действии.

В некоторые случаях разный порядок фильтров может приводить к совершенно разному результату. Например, использование sepia() после grayscale() преобразует изображение в сепию, а использование grayscale() после sepai() сделает его черно-белым.

Анимация фильтров

Свойство filter может быть анимировано. При правильном сочетании из0ображения и фильров можно добиться потрясающих результатов. Рассмотрим фрагмент кода ниже:

Я использовал фильтры hue-rotate() и brightness() вместе, чтобы добиться эффекта дня и ночи. На 20% анимации я увеличиваю яркость, оставляя оттенок без изменения, чтобы создать эффект солнечного дня. К конце анимации я поворачиваю оттенок на 180 градусов. В результате получаю синее изображение. В сочетании с очень низкой яркостью, это создает эффект ночи.

Заключение

Помимо 11-ти фильтров, о которых мы говорили выше, существует также фильтр custom(). Он позволяет создавать совершенно разные эффекты с помощью шейдеров. Есть несколько проблем с этим фильтром, которые приостановили его развитие. Компания Adobe активно работает, чтобы придумать решения этих проблем. Надеюсь, скоро фильтр custom() можно будет использовать в своих проектах.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Илон Маск рекомендует:  Что такое код hebrevc
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL