Фильтры CSS3

CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

了解CSS3滤镜功能

在本章中，我们将讨论CSS3中引入的滤镜效果，您可以在将滤镜效果绘制到网页上之前，对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。

可以使用CSS3 filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。以下是一个使用示例：

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

警告：当前任何版本的Internet Explorer都不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但是该功能已被弃用。

模糊效果

Photoshop可以使用blur()功能将像高斯模糊效果这样的效果应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则使用值0。

img {
　　　　-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
　　　　filter: blur(5px);
}

—Результат вышеуказанного примера приведен ниже:

Установка яркости изображения

Функция brightness() используется для установки яркости изображения. Значение 0% создает полностью черное изображение. Значение 100% или 1 оставляет изображение без изменений. Другие значения являются линейными множителями эффекта.

Вы также можете установить亮度 выше 100%, что сделает изображение ярче. Если параметр количества отсутствует, используется значение 1. Не разрешены отрицательные значения.

img.bright {
　　　　-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
　　　　filter: brightness(200%);
}
img.dark {
　　　　-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
　　　　filter: brightness(50%);
}

—Результат вышеуказанного примера приведен ниже:

Регулировка контрастности изображения

Функция contrast() используется для регулировки контрастности изображения. Значение 0% создает полностью черное изображение. Значение 100% или 1 оставляет изображение без изменений. Также разрешены значения выше 100%, что предоставляет результат с пониженной контрастностью. Если параметр количества отсутствует или опущен, используется значение 1.

img.bright {
　　　　-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
　　　　filter: contrast(200%);
}
img.dim {
　　　　-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
　　　　filter: contrast(50%);
}

—Результат вышеуказанного примера приведен ниже:

Добавление тени к изображению

Вы можете использовать функцию drop-shadow() для применения эффекта тени к изображениям в Photoshop и других графических редакторах. Эта функция ähnelt derbox-shadowсвойства.

img {
　　　　-webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
　　　　filter: drop-shadow(4px 4px 10px orange);
}

—Результат вышеуказанного примера приведен ниже:

Преобразование изображения в градации серого

Функция grayscale() позволяет преобразовать изображение в градации серого. Значение 100% полностью черно-белое. Значение 0% сохраняет изображение без изменений. Значения между 0% и 100% представляют собой линейное умножение эффекта. Если параметр количества отсутствует, используется значение 0.

img.complete-gray {
　　　　-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
　　　　filter: grayscale(100%);
}
img.partial-gray {
　　　　-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
　　　　filter: grayscale(50%);
}

—Результат вышеуказанного примера приведен ниже:

Применение вращения оттенков к изображению

Функция hue-rotate() применяет вращение оттенков к изображению. Передаваемый параметр определяет градусы, на которые будет настроен цветовой контур образца изображения. Значение 0deg сохраняет изображение без изменений. Если параметр angle отсутствует, используется значение 0deg. Максимального значения нет, эффект будет повторяться с интервалом 360deg.

img.hue-normal {
　　　　-webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
　　　　filter: hue-rotate(150deg);
}
img.hue-wrap {
　　　　-webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
　　　　filter: hue-rotate(480deg);
}

—Результат вышеуказанного примера приведен ниже:

Эффект переворота

Функция invert() может применяться к изображению с эффектом переворота, как в Photoshop. Значение 100% или 1 полностью переворачивает. Значение 0% оставляет входной сигнал без изменений. Значения между 0% и 100% представляют собой линейный множитель эффекта. Если параметр 'amount' отсутствует, используется значение 0. Не допускаются отрицательные значения.

img.partially-inverted {
　　　　-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
　　　　filter: invert(80%);
}
img.fully-inverted {
　　　　-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
　　　　filter: invert(100%);
}

—Результат вышеуказанного примера приведен ниже:

Применение непрозрачности к изображению

Функция opacity() может использоваться для добавления прозрачности изображению. Значение 0% является полностью прозрачным. Значение 100% или 1 сохраняет изображение без изменений. Значения между 0% и 100% представляют собой линейный множитель эффекта. Если параметр 'amount' отсутствует, используется значение 1. Эта функция подобна функцииopacityсвойства.

img {
　　　　-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
　　　　filter: opacity(80%);
}

—Результат вышеуказанного примера приведен ниже:

Применение эффекта sepia к изображению

Функция sepia() преобразует изображение в sepia-оттенки. Значение 100% или 1 является полным черным цветом. Значение 0% сохраняет изображение без изменений. Значения между 0% и 100% представляют собой линейный множитель эффекта. Если параметр 'amount' отсутствует, используется значение 0.

img.complete-sepia {
　　　　-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
　　　　filter: sepia(100%);
}
img.partial-sepia {
　　　　-webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
　　　　filter:　sepia(30%);
}

—Результат вышеуказанного примера приведен ниже:

Настройка насыщенности изображения

Функция saturate() может использоваться для настройки насыщенности изображения. Значение 0% полностью несaturировано. Значение 100% сохраняет изображение без изменений. Другие значения являются линейным множителем эффекта. Также разрешены значения выше 100%, что предоставляет эффекты super-saturации. Если параметр 'amount' отсутствует, используется значение 1.

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—Результат вышеуказанного примера приведен ниже: