Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Фильтры изображений
Фильтр – это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера, применяя к нему разные эффекты в виде размытия, изменения непрозрачности, яркости, контрастности и др. Допускается задавать одновременно несколько эффектов.
Фильтры можно применить не только к изображениям, но и к любым другим элементам веб-страницы.
Чтобы применить фильтр к элементу, нужно задать значение его свойство 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 фильтров современными браузерами достаточно хорошая.
Читать дальше: Адаптивная верстка
.
Прокомментировать/Отблагодарить