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

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

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

Эффекты CSS3-фильтра в настоящее время не поддерживаются ни в одной версии Internet Explorer. Более старые версии IE поддерживали нестандартное свойство filter для создания таких эффектов, как непрозрачность, но эта функция устарела.

Эффект Blur

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

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

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

parrot Image parrot blur Image parrot blur Image
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%);
}

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

parrot brightness Image parrot brightness Image parrot brightness Image
brightness(50%) brightness(100%) brightness(200%)

Функции, которые принимают значение, выраженное знаком процента (например, 75%), также принимают значение, выраженное в десятичном виде (например, 0.75). Если значение недопустимо, функция возвращает none и эффект фильтра не будет применен.

Эффект 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%);
}

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

parrot contrast Image parrot contrast Image parrot contrast Image
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);
}

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

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

Первый и второй параметры функции drop-shadow() задают горизонтальное и вертикальное смещение тени соответственно, тогда как третий параметр задает радиус размытия, а последний параметр задает цвет тени, как свойство box-shadow, с одним исключением — ключевое слово inset не допускается.

Эффект 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%);
}

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

parrot grayscale Image parrot grayscale Image parrot grayscale Image
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);
}

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

parrot hue-rotate Image parrot hue-rotate Image parrot hue-rotate Image
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%);
}

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

parrot invert Image parrot invert Image parrot invert Image
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%);
}

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

parrot opacity Image parrot opacity Image parrot opacity Image
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%);
}

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

parrot sepia Image parrot sepia Image parrot sepia Image
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%);
}

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

parrot saturate Image parrot saturate Image parrot saturate Image
saturate(100%) saturate(200%) saturate(0%)

Функция url() определяет ссылку на фильтр для конкретного элемента. Например, url(commonfilters.svg#foo). Если ссылка указана на элемент, который не существует, или указанный элемент не является элементом фильтра, то вся цепочка фильтров игнорируется. Фильтр не применяется к элементу.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.