CSS фильтры

CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы, полное описание на developer.mozilla.org.

В данной статье представлены только основные фильтры по цвету, по мимо них есть наложение тени и фильтры с использованием SVG.

Размытие по Гауссу, значение задается в px или em, по умолчанию 0, отрицательные значения не допускается.

img {
	filter: blur(0px);
}
CSS

Понижение или повышение яркости изображения, значение задается в процентах или числом. По умолчанию 100% или 1, отрицательное значение не допускается.

img {
	filter: brightness(100%);
}
CSS

Понижение или повышение контраста изображения, значение задается в процентах или числом, по умолчанию 100% или 1, отрицательное значение не допускается.

img {
	filter: contrast(100%);
}
CSS

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

img {
	filter: grayscale(0%);
}
CSS

Замена цветов, в качестве значения указывается угол (deg) от 0 до 360, значение может быть отрицательным.

img {
	filter: hue-rotate(0deg);
}
CSS

Инверсия цветов, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.

img {
	filter: invert(0%);
}
CSS

Прозрачность элемента. Значение от 0% до 100% или от 0 до 1, по умолчанию 100%.

img {
	filter: opacity(100%);
}
CSS

Насыщенностью цветов, интенсивность задаётся положительным числом или процентами, по умолчанию 1 или 100%.

img {
	filter: saturate(100%);
}
CSS

Сепия или эффект старины, значение от 0% до 100%.

img {
	filter: sepia(0%);
}
CSS
18.04.2020, обновлено 16.12.2021
4327

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
28367
+31
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
50041
+5
Преобразование цветов в PHP
Несколько примеров как перевести цвета из HEX в RGB и обратно с помощью PHP.
11373
0
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
10485
+1
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
14347
+3
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
34992
+5