Руководство по фильтрам в CSS3

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

Эффекты фильтра могут быть применены к элементу с помощью свойства filter, которое принимает одну или несколько функций в указанном порядке.

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

Эффект Blur

Эффект размытия по Гауссу можно применить к элементу с помощью функции blur(). Работает это так же, как и в Photoshop,. Эта функция принимает CSS-значения в качестве параметра, который определяет радиус размытия. Чем больше значение, тем больше размытие. Если параметр не указан, используется значение 0.

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

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

blur(0)	blur(2px)	blur(5px)

Эффект Brightness

Функция 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%);
}

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

brightness(50%)	brightness(100%)	brightness(200%)

Эффект Contrast

Функция 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%);
}

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

contrast(50%)	contrast(100%)	contrast(200%)

Эффект Drop Shadow

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

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

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

drop-shadow(0)	drop-shadow(2px 2px 4px orange)	drop-shadow(4px 4px 10px orange)

Эффект Grayscale

Изображения можно преобразовать в оттенки серого с помощью функции 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%);
}

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

grayscale(0)	grayscale(50%)	grayscale(100%)

Эффект Hue Rotation

Функция hue-rotate() применяет поворот оттенка в формате HUE для изображения. Переданный параметр определяет количество градусов вокруг цветового круга, для которого будут корректироваться образцы изображения. Значение 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);
}

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

hue-rotate(0)	hue-rotate(150deg)	hue-rotate(480deg)

Эффект Invert

Эффект инвертирования, такой как в Photoshop, можно применить к изображению с помощью функции invert(). Значение 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%);
}

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

invert(0)	invert(80%)	invert(100%)

Эффект Opacity

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

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

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

opacity(100%)	opacity(80%)	opacity(30%)

Эффект Sepia

Функцияsepia() применяет эффект сепия-тонирование. Значение 100% или 1 полностью сепирует изображение. Значение 0% оставляет изображение без изменений. Значения между 0% и 100% являются линейными множителями эффекта. Если параметр отсутствует, используется значение 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%);
}

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

sepia(0)	sepia(30%)	sepia(100%)

Эффект Saturation

Функция saturate() может использоваться для настройки насыщенности изображения. Значение 0% делает изображение полностью ненасыщенным. Значение 100% оставляет изображение без изменений. Другие значения являются линейными множителями эффекта. Допускаются также значения более 100%, что дает перенасыщенность. Если параметр 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%);
}

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

saturate(100%)	saturate(200%)	saturate(0%)