Фильтры в CSS

В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа с приставкой -webkit- указывают первую версию, которая работала с приставкой.

Синтаксис

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

none – Значение по умолчанию. Не указывает, никаких эффектов

blur(px) – К изображению применяется эффект размытия . Большее значение будет создавать больше размытия .По умолчанию используеться значение 0 .

Пример

img {
 filter: blur(3px);
 -webkit-filter: blur(3px);
}

brightness(%) – Регулировка яркости изображения .0% делает изображение полностью черным .100% является по умолчанию и представляет собой исходное изображение.Значения более 100% обеспечит более яркие результаты.

Пример

img {
 filter: brightness(150%);
 -webkit-filter: brightness(150%);
 }

contrast(%) – Регулировка контрастности изображения.0% делает изображение полностью черным.100% является по умолчанию и представляет собой исходное изображение. Значения более 100% обеспечит результаты с меньшим количеством контраста.

Пример

img {
 filter: contrast(200%);
 -webkit-filter: contrast(200%);
}

drop-shadow(h-shadow v-shadow blur spread color) – Применяется эффект тени к изображению.

Возможные значения:

• h-shadow – Обязательно. Задает значение пикселя для горизонтальной тени. Отрицательные значения поместить тень слева от изображения.
• v-shadow – Обязательно. Задает значение пикселя для вертикальной тени. Отрицательные значения поместите тень над изображением.
• blur – необязательно. Это третье значение, и должно быть в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать больше размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (край теневой является резкое).
• spread – Необязательно. Это четвертое значение, и должно быть в пикселях. Положительные значения заставит тень расширяться и расти больше, а отрицательные значения приведет тень сокращаться. Если не указано, то будет 0 (тень будет иметь тот же размер, как элемент).
• color – необязательно. Добавляет цвет тени. Если не указано, цвет зависит от браузера (часто черного цвета). 

Пример

img {
 filter: drop-shadow(8px 8px 10px );
 -webkit-filter: drop-shadow(8px 8px 10px );
 }

grayscale(%) – Преобразование изображения в оттенках серого.0% по умолчанию , и представляет собой исходное изображение.100% сделает изображение полностью серый (используется для черно-белых изображений ).

Пример

img {
 filter: grayscale(50%);
 -webkit-filter: grayscale(50%);
 }

hue-rotate(deg) – Применяется поворот цветового тона на изображении. Значение определяет какое количество градусов вокруг цветового круга будет скорректирован. 0deg по умолчанию , и представляет собой оригинальное изображение.

Пример

img {
 filter: hue-rotate(90deg);
 -webkit-filter: hue-rotate(90deg); 
}

invert(%) – Инвертирует образцы в изображении.0 по умолчанию , и представляет собой исходное изображение .100% сделает изображение полностью перевернутой.

Пример

img {
 filter: invert(100%);
-webkit-filter: invert(100%); 
 }

opacity(%)Устанавливает уровень непрозрачности для изображения.0% является полностью прозрачным. 100% является по умолчанию и представляет собой исходное изображение (без прозрачности).

Пример

img {
 filter: opacity(30%);
 -webkit-filter: opacity(30%);
 }

saturate(%) – Насыщает изображение .0% сделает изображение не – насыщенными.100% по умолчанию и представляет собой исходное изображение.Значения более 100% обеспечивает супер – насыщенные результаты .

Пример

img {
 filter: saturate(800%);
 -webkit-filter: saturate(800%);
 }

sepia(%) – Преобразует изображение в сепии.0% по умолчанию , и представляет собой исходное изображение. 100% делает изображение полностью сепией .

Пример

img {
 filter: sepia(100%);
 -webkit-filter: sepia(100%);
 }

Если хотите использовать несколько фильтров, надо каждый фильтр отделить пробелом.