CSS фильтры: текстовые, тень, прозрачность. Эффекты

К элементам страницы можно применить фильтры для получения разнообразных мультимедийных эффектов. Фильтры разделяются на статические и динамические. Статический фильтр даёт уже готовый вид элемента. Динамический переход создаёт анимационный эффект.

К элементам body, img, input, table, td, th, textarea фильтры применимы безусловно. Элементы div и span должны быть абсолютно позиционированы или иметь в параметре style определения высоты и ширины. Фильтры нельзя применять к заголовкам, элементам iframe, select, option, p, em.

Фильтры задаются свойством Filter: имяФильтра(параметры). К одному элементу можно применить сразу несколько фильтров.

Текстовые фильтры

Приведу описание некоторых фильтров, которые обычно применяются к тексту.

Тень shadow

Применяется для того, чтобы сделать текст объёмным.

shadow(color='цвет', direction=направление)

где цвет тени задаётся кодовым словом или шестнадцатеричным значением а направление падения тени задаётся в градусах относительно 12-ти часов.

Приведу описание некоторых фильтров, которые обычно применяются к тексту.

Отброшенная тень dropshadow

Применяется с той же целью, за текстом появляется его силует.

dropshadow(color='цвет', offx=смещение, offy=смещение)

где смещение задаёт отступ силуета в пикселях по горизонтали и вертикали. Если оба значения положительны, то силует смещается вправо и вниз.

Свечение glow

Создаёт вокруг символов светящийся ореол.

glow(color='цвет', strength=интенсивность)

где интенсивность задаёт ширину свечения в пикселях.

Универсальные фильтры

Следующие фильтры применяются как к тексту, так и к изображениям.

Маска mask

mask(color='цвет')

где цвет заливает прозрачные области объекта, а непрозрачные становятся белыми.

Размытие blur

blur(direction=направление, strength=интенсивность, add={true|false})

где параметр add задаёт или отменяет добавление исходного варианта объекта в отфильтрованное.

Волновое искажение wave

wave(freq=частота, phase=фаза, lightstrength=освещение,
     strength=интенсивность, add={true|false})

где частота задаёт количество пиков волны, а фаза - проценты от синусоиды.

Зеркальное отражение fliph и flipv

Фильтр fliph создаёт отражение по горизонтали, flipv - по вертикали. Оба фильтра без параметров.

Это дача!

Прозрачность alpha

Применяется для создания эффекта прозрачности всего изображения или его частей.

alpha(opacity=прозрачность, style=стиль[, startx=X1, starty=Y1, finishx=X2,      finishy=Y2])

где прозрачность задаётся в процентах, стиль имеет предопределённые значения

• 0 - фильтр применяется равномерно по всему изображению;
• 2 - прозрачность изменяется от центра эллипса, вписанного в границы, до краёв;
• 3 - прозрачность изменяется от центра изображения до краёв;
• 1 - вдоль отрезка прямой, заданной координатами начала (X₁,Y₁) и конца (X₂,Y₂).

Надеюсь, не надо пояснять, какой стиль на каком рисунке применялся.

Если вы не видите эффекты, значит браузер не поддерживает эти css стили.