Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Фильтры изображений

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

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

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

filter: имя_фильтра([параметры]);

Функции filter

blur(). Устанавливает размытие по Гауссу.

В качестве значения задается радиус размытия в px, em или rem.

Пример
img:hover {filter: blur(3px);}

РЕЗУЛЬТАТ:

Размытие

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

brightness(). Изменяет яркость изображения в большую или меньшую сторону.

Значение задается в % или в десятичных дробях. 100% или 1 не применяет фильтр.

Пример
img:hover {filter: brightness(1.5);}

РЕЗУЛЬТАТ:

Яркость

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

contrast(). Меняет контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками.

Значение задается в % или в десятичных дробях. 100% или 1 не применяет фильтр.

Пример
img:hover {filter: contrast(40%);}

РЕЗУЛЬТАТ:

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

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

drop-shadow(). Применяет эффект тени к элементу и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст, то фильтр добавит тень и для текста, и для видимых границ блока. Действует подобно свойствам box-shadow и text-shadow.

Использует следующие значения: смещение по оси Х, смещение по оси Y, размытость, цвет тени.

Пример
div.drop-shadow:hover {filter: drop-shadow(1px 1px 2px black);}

РЕЗУЛЬТАТ:

Эффект тени

Наведите указатель мышки на блок, чтобы увидеть фильтр в действии.

grayscale(). Преобразует изображение в оттенки серого.

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

Пример
img:hover {filter: grayscale(90%);}

РЕЗУЛЬТАТ:

Оттенки серого

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

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

Значение задается в градусах от 0deg до 360deg. 0deg не применяет фильтр.

Пример
img:hover {filter: hue-rotate(180deg);}

РЕЗУЛЬТАТ:

Изменение оттенка

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

invert(). Инвертирует цвета изображения.

Значение задается в % или в десятичных дробях. 100% или 1 делает полный негатив, 0% или 0 не применяет фильтр.

Пример
img:hover {filter: invert(100%);}

РЕЗУЛЬТАТ:

Изменение оттенка

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

opacity(). Добавляет элементу прозрачность.

Значение задается в % или в десятичных дробях. 0% или 0 делает полную прозрачность, 100% или 1 не применяет фильтр.

Пример
img:hover {filter: opacity(.5);}

РЕЗУЛЬТАТ:

Прозрачность

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

saturate(). Меняет насыщенность цветов изображения.

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

Пример
img:hover {filter: saturate(125%);}

РЕЗУЛЬТАТ:

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

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

sepia(). Преобразует входное изображение в сепию, т.е. имитирует старину.

Значение задается в % или в десятичных дробях. 100% или 1 делает полную сепию, 0% или 0 не применяет фильтр.

Пример
img:hover {filter: sepia(.75);}

РЕЗУЛЬТАТ:

Сепия

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

Комбинирование функций filter

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

Пример
img:hover {filter: brightness(1.5) contrast(1.75) saturate(1.25);}

РЕЗУЛЬТАТ:

Яркость, контрастность, насыщенность

Наведите указатель мышки на картинку, чтобы увидеть фильтр в действии.

Поддержка CSS фильтров современными браузерами достаточно хорошая.

Читать дальше: Адаптивная верстка


.