Графические фильтры

Здравствуйте, уважаемые подписчики!

Представляю Вашему вниманию пятнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы завершим изучение фильтров на примере пильтров, применяемых к графике.

---

Содержание выпуска:

• Графические фильтры.
• Анонс следующего выпуска.
• Новости сайта.
• Новости Интернет.

Графические фильтры

Как и в прошлом выпуске мы пример для каждого фильтра будет состоять из двух частей: описание параметров фильтра и класс, созданный для этого фильтра. Например, описание графического фильтра Alpha выглядит так:

А класс, созданный для этого фильтра вот так:

Теперь, для того, чтобы использовать этот фильтр необходимо задать стиль для графического тега img:

Результат использования фильтра Alpha.

Свойство размытия изображения задается с помощью фильтра Blur:

Свойство Add со значением 0 определяет результат работы фильтра, а со значением 1 приводит сумму фильтра и исходного изображения. Свойство Direction определяет направление размытости. Значение 0 соответствует вертикальному направлению и может меняться по часовой стрелке с шагом в 45 градусов. Свойство Strength определяет интенсивность размытости. Пример использования размытости:

Результат использования фильтра Blur.

Фильтры горизонтального FlipH и вертикального поворота текста FlipV не имеют параметров. Их использование аналогично рассмотренному в предыдущем выпуске к текстовым тегам.

Для создания нинверсии изображения используется фильтр Invert:

Результат использования фильтра Invert.

Для создания изображения в тонах серого используется фильтр Gray:

Результат использования фильтра Gray.

Прозрачность для одного цвета (Chroma).

Использование этого фильтра для изображения в формате jpg как правило затруднено из-за невозможности определить область залиную одним отенком цвета. Эффективней использовать изображение в формате gif из-за того, что в этом формате используется вполне определенная палитра цветов. Пример использования фильтра Chroma (делаем черный цвет прозрачным).

Негативное изображение (Xray):

Отметим, что этот фильтр отличен от фильтра инверсии. При инверсии получается изображение в дополнительных цветах, а в негативе дополнительно переводится изображение в отенки серого. Пример использования фильтра Xray

Синусоидально деформированный объект вдоль вертикальной линии создается с помощью фильтра Пример использования фильтра Wave. Применение аналогично описанному в предыдущем выпуске способу.

Последний и, пожалуй, самый интересный фильтр - анимированное появление изображения (RevealTrans):

Свойство Duration определяет продолжительность действия фильтра. Свойство Transition определяет стиль появления изображения. Значение может быть от 0 до 22 (каждое значение соответствует различному стилю появления изображения). Значение 23 и выше задает случайный стиль (меняется при перезагрузке страницы). Пример:

Пример использования фильтра RevealTrans (с помощью приведенного на странице скрипта вы сможете подобрать тот параметр Transition, который вам больше всего подходит).