На этом шаге мы рассмотрим фильтры blur и chroma.
Фильтр blur создает эффект размытия объекта. Его общий вид:
STYLE="filter:blur(Add = <логическое значение или число>,
Direction = <число>, Strength = <число>)"
Кратко опишем назначение перечисленных параметров.
Логическое свойство Add определяет, включать (значение true или число, отличное от 0) или не включать (значение false или 0) исходное изображение объекта, к которому применяется фильтр, в отфильтрованный образ.
Свойство Direction определяет направление, в котором размывается изображение объекта. Значением этого свойства является угол, отсчитываемый от вертикали объекта по часовой стрелке с шагом в 45 градусов. Отрицательные значения или значения, большие 360 градусов, приводятся к эквивалентным значениям в диапазоне от 0 до 360 градусов. Например, значение -45 градусов соответствует 315 градусов.
Свойство Strength определяет интенсивность применения фильтра и может изменяться от 0 до 255. Этот параметр задает степень размытости изображения элемента.
Следующий рисунок иллюстрирует использование этого фильтра.
Рис.1. Иллюстрация использования фильтра при наведении курсора мыши
В этом примере фильтр blur задан со следующими параметрами:
blur(Add = 50, Direction = 160, Strength = 100)
Фильтр chroma делает определенный цвет рисунка прозрачным. Общий вид:
STYLE="filter:chroma(Color = <цвет>)"
Цвет задается в формате RGB.
Следующий рисунок иллюстрирует использование этого фильтра.
Рис.2. Иллюстрация использования фильтра при наведении курсора мыши
В этом примере фильтр chroma задан со следующими параметрами:
chroma(Color = #0F106C)
На следующем шаге мы рассмотрим фильтр dropShadow.
