CSS свойство filtercss3

CSS свойства

Определение и применение

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
filtercss318.0
-webkit-
35.015.0
-webkit-
9.1
6.0
-webkit-
Нет13.0*

CSS синтаксис:

filter:"none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()";

Допускается иcпользование нескольких фильтров к элементу в одном объявлении.
filter:"blur(10px) brightness(150%);

JavaScript синтаксис:

object.style.webkitFilter = "blur(10px)"

Значения свойства

ЗначениеОписание
noneУказывает, что эффекты отсутствуют. Это значение по умолчанию.
blur(px)Применяет эффект размытия изображения. Чем больше указано значение, тем больше будет размытие. Если значение не задано, то используется значение 0.
brightness( % | 0+ ) Значение регулирует яркость изображения.
0% (0) - изображение полностью черное.
100% (1) - значение по умолчанию (исходное изображение).
Более 100%(1) - увеличивает яркость изображения.
contrast( % | 0+ ) Значение регулирует контрастность изображения.
0% (0) - изображение полностью серое.
100% (1) - значение по умолчанию (исходное изображение).
Более 100%(1) - увеличивает контрастность изображения.
drop-shadow(
h-shadow v-shadow blur-radius spread-radius color )
Значение определяет эффект тени изображения.
h-shadow - Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений, при этом тень будет слева от изображения.
v-shadow - Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений, при этом тень будет над изображением.
blur-radius - Необязательное значение. Задаёт радиус размытия в пикселях. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие - отчетливые тени). Отрицательные значения не допускаются.
spread-radius - Необязательное значение. Размер тени в пикселях (радиус растяжения тени). При положительных значениях тень будет расшииряться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента).
color - Необязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета"). Значением по умолчанию является черный.
Данного эффекта можно достичь, используя контейнер со свойством, которое имеет более широкую поддержку браузерами - box-shadowcss3(создание тени элемента). Также свойством box-shadowcss3 можно создать мультитень, чего нельзя достичь фильтром в одном объявлении. Основная разница заключается в том, что фильтры имеют аппаратное ускорение. Обращаю Ваше внимание, что четвертый параметр (spread-radius) может не поддерживаться некоторыми браузерами, а может и поддерживаться.
hue-rotate(deg) Производит замену цветов изображения в зависимости от заданного угла. Значение задается в градусах (0deg360deg). Угол поворота определяет количество градусов вокруг цветового круга (в зависимости от заданного угла цвет изображения меняется).
0deg - значение по умолчанию (исходное изображение). Максимальное значение 360deg.
цветовой круг от красного к фиолетовому, используемый в значении hue-rotate(deg) свойства filter в css3
grayscale( % | 0-1 ) Значение определяет эффект градации серого цвета. Отрицательные значения недопустимы.
0% (0) - значение по умолчанию (исходное изображение).
100% (1) - изображение полностью серое (используется для создания черно-белых изображений).
invert( % | 0-1 ) Значение инвертирует цвета изображения. Отрицательные значения недопустимы.
0% (0) - значение по умолчанию (исходное изображение).
100% (1) - изображение полностью инвертировано.
opacity( % | 0-1 ) Задает уровень прозрачности изображения. Отрицательные значения недопустимы.
0% (0) - изображение полностью прозрачно.
100% (1) - значение по умолчанию (исходное изображение).
Данного эффекта можно достичь, используя свойство, которое имеет более широкую поддержку браузерами - opacitycss3(определяет уровень прозрачности для элемента). Разница заключается в том, что фильтры имеют аппаратное ускорение.
saturate( % | 0+ ) Задает уровень насыщенности изображения. Отрицательные значения недопустимы.
0% (0) - не насыщенное изображение.
100% (1) - значение по умолчанию (исходное изображение).
Более 100%(1) - увеличивает насыщенность изображения.
sepia( % | 0-1 ) Конвертирует изображение в сепию (вид графической техники, использующий оттенки коричневого цвета). Отрицательные значения недопустимы.
0% (0) - значение по умолчанию (исходное изображение).
100% (1) - полностью конвертирует изображение в сепию.
url()Задает путь к XML файлу, который содержит SVG фильтр, либо фильтры, которые могут впоследствии использоваться как якорь (необходимо указывать определенный id для каждого фильтра). Допускается размещать SVG в теле документа.

Синтаксис при размещении SVG фильтра из XML документа:
filter: url(filters.xml#filter-id);
Синтаксис при размещении SVG фильтра в теле страницы:
filter: url(#filter-id);
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования


Эффект размытия изображения - функция blur()

img {
-webkit-filter:blur(5px); /* для расширенной поддержки свойства */
filter:blur(5px); /* эффект размытия изображения (указываем радиус) */

blur(0) - по умолчанию


Пример эффекта размытия изображения - функция blur()
0px;

blur (5px)


Пример эффекта размытия изображения - функция blur()

blur (10px)


Пример эффекта размытия изображения - функция blur()

Эффект увеличения яркости изображения - функция brightness()

img {
-webkit-filter:brightness(200%); /* для расширенной поддержки свойства */
filter:brightness(200%); /* эффект  увеличения яркости изображения */

brightness(100%) - по умолчанию


Пример эффекта увеличения яркости изображения - функция brightness()
100%;

brightness(200%)


Пример эффекта увеличения яркости изображения - функция brightness()

brightness(50%)


Пример эффекта уменьшения яркости изображения - функция brightness()

Эффект увеличения контрастности изображения - функция contrast()

img {
-webkit-filter:contrast(200%); /* для расширенной поддержки свойства */
filter:contrast(200%); /* эффект  увеличения контрастности изображения */

contrast(100%) - по умолчанию


Пример эффекта увеличения контрастности изображения - функция contrast()
100%;

contrast(200%)


Пример эффекта увеличения контрастности изображения - функция contrast()

contrast(50%)


Пример эффекта уменьшения контрастности изображения - функция contrast()

Эффект тени изображения - функция drop-shadow()

img {
-webkit-filter:drop-shadow(20px 10px 15px forestgreen); /* для расширенной поддержки свойства */
filter:drop-shadow(20px 10px 15px forestgreen); /* эффект тени изображения */

нет тени - по умолчанию


Пример эффекта тени изображения - функция drop-shadow()

drop-shadow(-40px -100px 10px rgb(255, 36, 0))


Пример эффекта тени изображения - функция drop-shadow()

drop-shadow(20px 10px 15px forestgreen)


Пример эффекта тени изображения - функция drop-shadow()

Эффект замены цветов изображения в зависимости от заданного угла - функция hue-rotate()

img {
-webkit-filter:hue-rotate(45deg); /* для расширенной поддержки свойства */
filter:hue-rotate(45deg); /* эффект замены цветов изображения */

hue-rotate(0deg) - по умолчанию


Пример эффекта увеличения контрастности изображения - функция brightness()
0deg;

hue-rotate(45deg)


Пример эффекта увеличения контрастности изображения - функция brightness()

hue-rotate(190deg)


Пример эффекта уменьшения контрастности изображения - функция brightness()

Эффект градации серого цвета - функция grayscale()(черно-белое изображение на CSS)

img {
-webkit-filter:grayscale(100%); /* для расширенной поддержки свойства */
filter:grayscale(100%); /* эффект градации серого цвета */

grayscale(0%) - по умолчанию


Пример эффекта градации серого цвета - функция grayscale()
0%;

grayscale(50%)


Пример эффекта градации серого цвета - функция grayscale()

grayscale(100%)


Пример эффекта градации серого цвета - функция grayscale()

Эффект инвертирования цвета изображения - функция invert()

img {
-webkit-filter:invert(100%); /* для расширенной поддержки свойства */
filter:invert(100%); /* эффект инвертирования цвета изображения */

invert(0%) - по умолчанию


Пример эффекта инвертирования цвета изображения - функция invert()
0%;

invert(55%)


Пример эффекта инвертирования цвета изображения - функция invert()

invert(100%)


Пример эффекта инвертирования цвета изображения - функция invert()

Эффект установки прозрачности изображения - функция opacity()

img {
-webkit-filter:opacity(50%); /* для расширенной поддержки свойства */
filter:opacity(50%); /* эффект прозрачности изображения */

opacity(100%) - по умолчанию


Пример эффекта установки прозрачности изображения - функция opacity()
100%;

opacity(50%)


Пример эффекта установки прозрачности изображения - функция opacity()

opacity(20%)


Пример эффекта установки прозрачности изображения - функция opacity()

Эффект установки насыщенности изображения - функция saturate()

img {
-webkit-filter:saturate(200%); /* для расширенной поддержки свойства */
filter:saturate(200%); /* эффект насыщенности изображения */

saturate(100%) - по умолчанию


Пример эффекта установки насыщенности изображения - функция saturate()
100%;

saturate(200%)


Пример эффекта установки насыщенности изображения - функция saturate()

saturate(50%)


Пример эффекта установки насыщенности изображения - функция saturate()

Конвертирование изображение в сепию - функция sepia()

img {
-webkit-filter:sepia(100%); /* для расширенной поддержки свойства */
filter:sepia(100%); /* конвертирование изображение в сепию
(вид графической техники, использующий оттенки коричневого цвета) */

sepia(0%) - по умолчанию


Пример конвертирования изображения в сепию - функция sepia()
0%;

sepia(50%)


Пример конвертирования изображения в сепию - функция sepia()

sepia(100%)


Пример конвертирования изображения в сепию - функция sepia()

Размещение SVG фильтра в теле страницы - функция url()

<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<style> 
img {
display: inline-block; /* устанавливаем, что изображения будут блочно-строчные (выстраиваются вертикально - в линейку) */
width: 25%; /* устанавливаем ширину изображений */
margin: 5% 2%; /* устанавливаем внешние отступы для изображений (верх/низ право/лево) */
}
test1 {
-webkit-filter:url(#brightness); /* для расширенной поддержки свойства */
filter:url(#brightness); /* ссылаемся на SVG фильтр, размещенный в теле страницы (эффект увеличения яркости изображения - 2(200%) */
}
test2 {
-webkit-filter:url(#saturate); /* для расширенной поддержки свойства */
filter:url(#saturate); /* ссылаемся на SVG фильтр, размещенный в теле страницы (эффект установки насыщенности изображения - 2(200%) */
}
</style>
</head>
	<body>
		<img  src = "/images/kot_shock.jpeg" alt = "kot_shock">
		<img  src = "/images/kot_shock.jpeg" alt = "kot_shock" class = "test1">
		<img  src = "/images/kot_shock.jpeg" alt = "kot_shock" class = "test2">
		<svg xmlns = "http://www.w3.org/2000/svg" height = "0px"  width = "0px">
			<filter id = "brightness"> /* SVG фильтр (эффект увеличения яркости изображения - 2(200%) */
				<feComponentTransfer>
					<feFuncR type = "linear" slope = "2"/>
					<feFuncG type = "linear" slope = "2"/>
					<feFuncB type = "linear" slope = "2"/>
				</feComponentTransfer>
			</filter>
			<filter id = "saturate"> /* SVG фильтр (эффект установки насыщенности изображения - 2(200%) */
				<feColorMatrix type = "saturate" values = "2"/>
			</filter>
		</svg>
	</body>
</html>

Изображение
по умолчанию


Пример эффекта установки насыщенности изображения - функция saturate()

filter:url(#brightness);
brightness(200%)


Пример эффекта установки насыщенности изображения - функция saturate()

filter:url(#saturate);
saturate(200%)


Пример эффекта установки насыщенности изображения - функция saturate()

CSS свойства