html.okpython.net
HTML и CSS для начинающих

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

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

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

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

Синтаксис

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

Значения

  • 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 – отменяет действие всех фильтров, используемых для элемента.

Ссылки

Примеры

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