Учись Учиться

Педагогика
Информатика
09 May 2011

Визуальные фильтры

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 
    Tags:
  • Визуальные фильтры
  • Фильтр WAVE
  • Фильтр ALPHA
  • Фильтр dropShadow
  • программирование
  • информатика
  • фильтр

Визуальные фильтры

В Dynamic HTML под фильтром принято понимать некую функцию, так или иначе преобразующую внешний вид элемента на Web-странице. Преобразование осуществляется непосредственно в браузере, т. е. на стороне клиента (подключение сервера не требуется).

Следует отметить, что применение визуальных фильтров возможно только в браузерах Internet Explorer 4.x и выше. Тем не менее, горячие поклонники Microsoft Internet Explorer или разработчики, ориентирующиеся при создании Web-сайтов на показатели статистики в отношении применяемых браузеров, с помощью средств динамического HTML смогут существенно улучшить внешний вид своих электронных данных.

Визуальные динамические фильтры можно применить не ко всем элементам HTML-документа, а только к тем, которые способны определить в браузере блок прямоугольного вида. Чаще всего фильтры применяются к изображениям.

Формат записи фильтра достаточно прост и аналогичен правилам задания войств элементов с помощью тега {style}. Запись производится в следующем виде:

filter: название_фильтра(параметры),

где параметры определяются в стандартном для HTML виде:

название_параметра=значение_параметра

Прежде чем перейти к рассмотрению фильтров и возможностей их применения, необходимо сказать, что, во-первых, допускается использование сразу нескольких фильтров (если это не противоречит окончательному визуальному результату отображения элемента), во-вторых — при указании фильтров, не имеющих никаких параметров, присутствие круглых скобок (без пробелов) после названия фильтра обязательно.

При использовании фильтров следует помнить, что некоторые из них имеют общие свойства, влияющие на характер действия заданных параметров фильтра. К таковым относятся enabled (со значением true или false, соответственно разрешающим или запрещающим применение фильтра, присоединенного к элементу документа), direction (определяет направление действия таких фильтров, как shadow, blur и др.), strength (задает интенсивность действия фильтра со значением от 0 до 255) и т. п. Часть фильтров помимо общих свойств имеют различные методы их определения (например, фильтр light).

Браузер Internet Explorer 4.x (и выше) поддерживает достаточно большое количество фильтров, широкие возможности по настройке которых представляют применение этой технологии в более выгодном свете.

Характеристика визуальных фильтров, работающих в браузере Internet Explorer:

Название фильтра

Описание действия

alpha

Определение степени прозрачности объекта

blendTrans

Настройка контрастности отображения объекта

blur

Размытие объекта

chroma

Установление прозрачности пикселям заданного цвета

dropShadow

Создание сплошного силуэта объекта

flipH

Зеркальное отображение объекта по горизонтали

flipV

Зеркальное отображение объекта по вертикали

glow

Создание эффекта свечения внешних границ объекта

gray

Отображение объекта в серых тонах

invert

Инвертирование цветовой гаммы объекта

light

Создание эффекта освещения объекта

mask

Создание прозрачной маски из непрозрачных пикселей объекта

redirect

Преобразование объекта в элемент DAlmage (технология Microsoft DirectAnimation)

revealTrans

Эффект появления/исчезновения объекта

shadow

Создание силуэта объекта вдоль его границы

wave

Эффект искривления объекта по вертикали

хrау

Изменение глубины цвета объекта (эффект рентгеновского снимка)

Рассмотрим на примерах возможные варианты действия некоторых фильтров.

Фильтр WAVE

Фильтр wave создает синусоидальное искривление объекта в вертикальном направлении и имеет свойства add, enabled, freq, lightStrength, phase и strength, имеющие следующее назначение:

strength – задает интенсивность действия фильтра со значением  от 0 до 255

add – определяет необходимость добавления исходного вида объекта в его отфильтрованную интерпретацию (add=1 – добавить; add=0 – не добавлять)

freq – задает количество максимумов в волне искривления объекта;

lightstrength – добавляет эффект трехмерности гребням волны искажения объекта;

phase – определяет фазу смещения волны (ее значение задается в процентах относительно начальной фазы, равной 0).

На рис. 53 представлен результат работы фильтра с параметрами, прописанными в следующем коде:

{IMG SRC="dog.jpg" WIDTH="200" }

{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: wave(strength=10, add=0, lightstrength=20, freq=5)"}

{IMG SRC="dog.jpg" WIDTH="200"  STYLE="filter: wave(strength=5, add=0, phase=50, lightstrength=20, freq=20)"}

Использование визуального фильтра WAVE

Рис.53 Использование визуального фильтра WAVE

Фильтр ALPHA

Данный фильтр использует такие свойства, как opacity, style и finishOpacity. Свойство opacity позволяет определить степень прозрачности объекта в интервале от 0 (полная прозрачность) до 100 (полная непрозрачность). Свойство style может принимать значения от 0 до 3.

При style=0  весь объект становится равномерно прозрачным  в соответствии со значением свойства opacity

При style=2, степень прозрачности изменяется от центра объекта к границе вписанного в объект круга (от значения opacity до значения finishOpacity).

Если свойство styie=3, то прозрачность меняется от центра объекта к его границам.

Использование визуального фильтра alpha

На рис. 54 представлены три примера действия фильтра alpha в соответствии с HTML-кодом:

{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: alpha(style=0, opacity=80)"}

{IMG SRC="dog.jpg" WIDTH="200"  STYLE="filter: alpha(style=3, opacity=100, finishOpacity=20)"}

{IMG SRC="dog.jpg" WIDTH="200"  STYLE="filter: alpha(style=2, opacity=100, finishOpacity=0)"}

Рис. 54. Использование визуального фильтра alpha

Фильтр dropShadow

Фильтр dropShadow создает сплошной силуэт объекта, смещенный в заданном направлении, и образует эффект тени.

Фильтр имеет следующие свойства:

color – определение цвета тени;

positive – выбор между тенью от прозрачных или непрозрачных точек объекта (при positive=1 тень будут создавать непрозрачные пиксели, а при positive=0 – прозрачные);

offX и offY – расстояние в пикселях в вертикальной и горизонтальной плоскостях, на которых будет отображаться тень от исходного объекта. Положительные значения offX и offY смещают тень, соответственно, вправо и вниз, отрицательные – влево и вверх.

Использование визуального фильтра dropShadow

На рис. 55 показано, как выглядит в браузере прозрачное gif-изображение и то же изображение с применением фильтра dropShadow с различными параметрами в соответствии с кодом:

{IMG SRC="ten.gif" }

{IMG SRC="ten.gif" STYLE="filter: dropShadow(color=#00ff00, positive=1, offX=-20, offY=30 )"}

{IMG SRC="ten.gif" STYLE="filter: dropShadow (color=#00ff00, positive=0, offX=20, offY=30 )"}

Образец выполнения задания

Рис. 55. Использование визуального фильтра dropShadow

Задание 3.8

Используя визуальные фильтры, создайте веб-страницу, представленную на рис. 56. При выполнении задания следует учесть следующее:

Заголовок выполнен с помощью фильтра dropShadow на основе изготовленного в PhotoShop прозрачного изображения в формате gif.

Первый ряд изображений получен  с помощью фильтра WAVE с использованием различных значений параметров.

Во втором ряду в центре – неискаженное изображение, а справа и слева от него к рисункам применен фильтр alpha.

Рис.56. Образец выполнения задания

Расположенное в центре третьего ряда изображение – результат одновременного применения сразу двух фильтров wave и alpha. Для одновременного применения запись фильтров осуществляется через пробел с указанием параметров для каждого из применяемых фильтров.

К остальным  рисункам нижнего ряда применен фильтр blur, размывающий изображение.  Использованы свойства:

ü strength, определяющее интенсивность размытия в пикселях,

ü direction, задающее направление размытия в градусах,

ü add, позволяющее демонстрировать размытое изображение на фоне исходного (add=1)

    Tags:
  • Визуальные фильтры
  • Фильтр WAVE
  • Фильтр ALPHA
  • Фильтр dropShadow
  • программирование
  • информатика
  • фильтр
Rating:
( 0 Rating )
  • Дипломная работа
    • Дипломы по физике
    • по психологии
  • Курсовая работа
  • Реферат
  • доклад
  • Статьи
  • Педагогика
  • Конспект лекций
  • Аннотация
  • Лабораторная работа
  • контрольная
  • Иследования
  • конспект урока

Недавно добавили

Решение задачи линейного программирования (ЗЛП) графическим методом 08 May 2011
Методика "Шифровка" 02 February 2011
Конспект урока Деформация. Сила упругости. Закон Гука 03 December 2011
Тема 10. Самоменеджмент. Система планирования времени. 25 April 2011
СУЩНОСТЬ, РОЛЬ И ФУНКЦИИ КРЕДИТА В РЫНОЧНОЙ ЭКОНОМИКЕ 04 November 2013
Принципы организации процесса обучения 06 April 2012
ОБ ИСПОЛЬЗОВАНИИ ПРИМИРИТЕЛЬНЫХ ПРОЦЕДУР ПРИ ОСУЩЕСТВЛЕНИИ ПРАВОСУДИЯ ПО СПОРАМ ЧАСТНОПРАВОВОГО ХАРАКТЕРА 25 March 2012
Информационные технологии документационного обеспечения управленческой деятельности. Системы управления документооборотом 16 February 2012
Формы. Создание странички для сбора сведений 09 May 2011
О СОЗДАНИИ СИСТЕМЫ РАННЕЙ ДИАГНОСТИКИ И ПРОФИЛАКТИКИ ИЗМЕНЕНИЙ ЗДОРОВЬЯ ДЕТЕЙ, ОБУСЛОВЛЕННЫХ ВОЗДЕЙСТВИЕМ ТЯЖЕЛЫХ МЕТАЛЛОВ 29 October 2011

Самое читаемое

  • Методика «Счет по Крепелину»
  • Характеристика На ученика 8а класса
  • Психолого-педагогическая характеристика на ученика 7«В» класса
  • Корректурная проба
  • Психологическая диагностика и коррекция агрессивного поведения детей и подростков
  • Понятие и виды преступности несовершеннолетних.
  • Список литературы по менеджменту
  • Лекция 11. Научные методы исследования. Правила выбора методов в соответствии с темой и задачами. Виды методов для различных направлений исследования.
  • Лекция 3. Планирование научного исследования. Формулировка целей и задач.
  • Отчет по производственной практике

Последние новости

Создание и исследование компьютерного электрокардиографа 02 February 2014
Оценка загрязнения продуктов питания на примере кисло-молочной продукции региональных производителей 02 February 2014
Дистанционная ударноволновая литотрипсия 01 February 2014
Исследование возможностей использования шумомера 01 February 2014
Методы компьютерной обработки визуальной информации УЗ-сканеров 25 January 2014
Правовое регулирование медиации в России 19 January 2014
Психологическая диагностика и коррекция агрессивного поведения детей и подростков 19 January 2014
Итоговое игровое профориентационное занятие «Как устроиться на работу» 19 January 2014
Участие населения в правотворческом процессе муниципальных образований: реальность или фикция? 18 January 2014
Хрематонимы города Кирова: опыт комплексного анализа 18 January 2014

Сейчас читают

Вопрос 3. Особенности приобретения и прекращения прав на земельные участки в границах населенных пунктов 02 March 2011
Информатика. Текстовый редактор MS Word 28 May 2012
ИНДИВИДУАЛЬНАЯ ПСИХОЛОГИЯ АЛЬФРЕДА АДЛЕРА 07 May 2012
Выявление зависимости предрасположенностей людей к различным заболеваниям от химического состава плазмы крови разных групп 25 October 2013
Влияние организационной культуры на организационную эфективность 09 January 2011
Лекция 10. Монографии, диссертации, авторефераты как источники научной информации 29 October 2011
Общее представление о системе методов в психологии 13 February 2012
ИЗМЕНЕНИЯ ПСИХОЛОГИЧЕСКИХ И ФИЗИОЛОГИЧЕСКИХ ПАРАМЕТРОВ У ДЕВУШЕК В ТЕЧЕНИЕ ИНДИВИДУАЛЬНОГО ГОДИЧНОГО ЦИКЛА 29 October 2011
Создание электронного учебного пособия 08 May 2011
Глобальное потепление 29 October 2011
  • Дипломная работа
    • Дипломы по физике
    • по психологии
  • Курсовая работа
  • Реферат
  • доклад
  • Статьи
  • Педагогика
  • Конспект лекций
  • Аннотация
  • Лабораторная работа
  • контрольная
  • Иследования
  • конспект урока