CSS :: Свойство filter

css-свойство filter (от англ. filter – фильтр) устанавливает для элемента визуальный эффект (фильтр), например, размытие или изменение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.filter="value".

Синтаксис

Значения

blur() (от англ. blur – затуманивать) – задаёт размытие элементов по Гауссу. Однако следует помнить, что применять данный фильтр непосредственно к элементу <body> нельзя, только к его потомкам. В качестве значений функция принимает любые доступные в CSS единицы измерения (смотреть). При этом изображение будет размыто тем сильнее, чем больше указанное значение. Отрицательные значения не допускаются, а если значение не указывать вообще, браузер использует значение 0px.
brightness() (от англ. brightness – яркость) – управляет яркостью элементов. В качестве значений могут использоваться проценты или положительные числа. При этом значения 100% или 1 не изменяют яркость элемента, меньшие 100% или 1 уменьшают яркость элемента, большие 100% или 1 увеличивают яркость элемента. Если значение не указывать вообще, браузер использует значение 1.
contrast() (от англ. contrast – контрастность) – управляет контрастностью элементов. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 дают однотонную серую картинку, 100% или 1 не изменяют контрастность элемента, меньшие 100% или 1 уменьшают контрастность элемента, большие 100% или 1 увеличивают контрастность элемента. Если значение не указывать вообще, браузер использует значение 1.
drop-shadow() (от англ. drop shadow – падающая тень) – добавляет тень к элементу. При этом в отличие от свойства box-shadow тень отбрасывается с учётом прозрачных участков изображения. Функция имеет следующий синтаксис: filter: drop-shadow(<смещение x> <смещение y> <размытие> <цвет>). Как видно, в качестве значений функция может принимать несколько параметров, которые должны перечисляться через пробел:
- смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
- смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
- размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
- цвет – необязательный параметр, который определяет цвет тени.
Для указания числовых значений параметров фильтра разрешается использовать все доступные в CSS единицы измерения (смотреть), а для указания цвета – любое допустимое в CSS его значение. При этом, если не указывать значения фильтра вообще, браузер использует для всех параметров значение 0, а цвет тени будет соответствовать значению свойства color.
grayscale() (от англ. grayscale – шкала серого) – превращает изображение в черно-белое. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют цветность, 100% или 1 превращают элемент полностью в черно-белый, меньшие 100% или 1 линейно уменьшают цветность элемента. Если значение не указывать вообще, браузер использует значение 0.
hue-rotate() (от англ. rotate – вращать) – изменяет цветность изображения в зависимости от значения угла на цветовом круге. При этом значения 0deg и 360deg не изменяют цветность элемента, а все остальные значения приводят к цветовому сдвигу. Если значение не указывать вообще, браузер использует значение 0deg.
invert() (от англ. invert – инвертировать, переворачивать) – инвертирует цвета элемента (напоминает процесс превращения фотографии в негатив). В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют элемент, 100% или 1 полностью инвертируют цвета элемента, меньшие 100% или 1 инвертируют цвета элемента частично. Если значение не указывать вообще, браузер использует значение 0.
opacity() (от англ. opacity – непрозрачность) – задаёт степень прозрачности элемента. Фильтр напоминает свойство opacity, однако некоторые браузеры применяют для фильтров аппаратное ускорение, что позволяет повысить их производительность. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 делают элемент полностью прозрачным, 100% или 1 не изменяют прозрачность элемента, меньшие 100% или 1 делают элемент частично прозрачным. Если значение не указывать вообще, браузер использует значение 1.
saturate() (от англ. saturate – насыщать) – изменяет насыщенность цветов в изображении. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 полностью убирают насыщенность цветов элемента, делая его черно-белым, 100% или 1 не изменяют насыщенность элемента, меньшие 100% или 1 делают элемент менее насыщенным, большие 100% или 1 делают элемент более насыщенным. Если значение не указывать вообще, браузер использует значение 1.
sepia() (от англ. sepia – сепия) – позволяет превратить элемент в сепию, т.е. чёрно-белое изображение с коричневым оттенком, придающем фотографии старинный вид. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют элемент, 100% или 1 полностью превращают элемент в сепию, меньшие 100% или 1 производят частичный эффект. Если значение не указывать вообще, браузер использует значение 0.
url() – задает путь к XML файлу, который содержит необходимые фильтры.
none – отменяет действие всех фильтров, используемых для элемента.

Ссылки

Официальный сайт W3C: https://drafts.fxtf.org/filter-effects-1/#propdef-filter

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/filter

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div{
		display: inline-block;
		width: 210px;
		height: 160px;
		padding: 20px;
		margin: 0.7em;
		border: 5px solid violet;
		background: url(balls.jpg);
		font-weight: bold;
		color: #550000;
		}

		.blur_filter{filter: blur(0.1em);}

		.brightness_filter{filter: brightness(120%);}		

		.contrast_filter{filter: contrast(50%);}

		.shadow_filter{filter: drop-shadow(10px 5px 20px blue);}

		.gray_filter{filter: grayscale(90%);}

		.hue_filter{filter: hue-rotate(90deg);}

		.invert_filter{filter: invert(0.7);}

		.opacity_filter{filter: opacity(70%);}		

		.saturate_filter{filter: saturate(170%);}

		.sepia_filter{filter: sepia(0.5);}

	</style>
	
</head>
<body>

<div>Исходный элемент</div>
<div class="blur_filter">filter: blur(1em)</div>
<br><br>

<div>Исходный элемент</div>
<div class="brightness_filter">filter: brightness(120%)</div>
<br><br>

<div>Исходный элемент</div>
<div class="contrast_filter">filter: contrast(50%)</div>
<br><br>

<div>Исходный элемент<br><br></div>
<div class="shadow_filter">filter: drop-shadow(10px 5px 20px blue)</div>
<br><br>

<div>Исходный элемент</div>
<div class="gray_filter">filter: grayscale(90%)</div>
<br><br>

<div>Исходный элемент</div>
<div class="hue_filter">filter: hue-rotate(90deg)</div>
<br><br>

<div>Исходный элемент</div>
<div class="invert_filter">filter: invert(0.7)</div>
<br><br>

<div>Исходный элемент</div>
<div class="opacity_filter">filter: opacity(70%)</div>
<br><br>

<div>Исходный элемент</div>
<div class="saturate_filter">filter: saturate(170%)</div>
<br><br>

<div>Исходный элемент</div>
<div class="sepia_filter">filter: sepia(0.5)</div>
<br><br>
	
</body>
</html>

Пример №1