Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 154 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • DHTML

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

  • 08.11.2001

Автор статьи: Головин Андрей

интернет Эксплорер версии 4 и выше реализует механизм фильтров, которые определяют способ вывода объекта на экран. Эти фильтры подразделяются на две группы: визуальные эффекты и эффекты перехода. Рассмотрим первую группу.

Применяемые фильтры указываются в описании стилей следующим образом: { filter: имя фильтра(параметр1, параметр2 …) }

Всего доступно 14 визуальных фильтров: <A href=»#alpha»>Alpha</A>, <A href=»#blur»>Blur</A>, <A href=»#chroma»>Chroma</A>, <A href=»#dropshadow»>DropShadow</A>, <A href=»#fliph»>FlipH</A>, <A href=»#flipv»>FlipV</A>, <A href=»#glow»>Glow</A>, <A href=»#gscal»>Gray</A>, <A href=»#invert»>Invert</A>, <A href=»#light»>Light</A>, <A href=»#mask»>Mask</A>, <A href=»#shadow»>Shadow</A>, <A href=»#wave»>Wave</A>, <A href=»#xray»>XRay</A>

<B>Внимание!</B> Для того, чтобы фильтры работали на текстовых блоках необходимо явно задать их ширину, высоту или установить абсолютное позиционирование!
<a name=#alpha></a>
<b>alpha</b>

FILTER: Alpha(Opacity=начальная прозрачность, FinishOpacity=конечная прозрачность, Style=стиль, StartX=начало эффекта по горизонтали, StartY=начало эффекта по вертикали, FinishX=конец эффекта по горизонтали, FinishY=конец эффекта по вертикали)

Устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента.

Параметры фильтра описаны в следующей таблице
>

Параметр Описание
Opacity Значение прозрачности. 0 — абсолютно прозрачно, 100 — абсолютно непрозрачно.
FinishOpacity Необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style.
Style 0 — равномерная прозрачность, 1 — линейный градиент, 2 — круговой градиент, 3 — прямоугольный градиент.
StartX, StartY Начальные координаты градиента по горизонтали и вертикали.
FinishX, FinishY Конечные координаты градиента по горизонтали и вертикали.

original alpha
ALPHA
ALPHA
Оригинал Фильтр


<a name=#blur></a>
<b>blur</b>

FILTER: Blur(Add=оригинал, Direction=направление, Strength=величина

Размывает изображение в направлении Direction, заданном в градусах (0 — вверх и далее по часовой стрелке c шагом 45 градусов). Если указано Add=1, то фильтр будет наложен на исходный объект иначе будет отоборажен только результат работы фильтра.

original blur
BLUR
BLUR
Оригинал Фильтр

Для текстовых блоков желательно задавать цвет фона, иначе эффект не буде отображен корректно, точнее так, как хотелось бы.
<a name=#chroma></a>
<b>chroma</b>

Chroma(Color=цвет)

Цвет, заданный в форме #RRGGBB становится прозрачным

original blur
Оригинал Фильтр


<a name=#DropShadow></a>
<b>DropShadow</b>

FILTER: DropShadow(Color=цвет, OffX=горизонтальное смещение, OffY=вертикальное смещение, Positive=тип тени)

Создает копию объекта, цветом Color, смещенную на указанное расстояние. Если Positive=1, то создается копия непрозрачных пикселей объекта, если — 0, то прозрачных.
&

SHADOW
SHADOW
Оригинал Фильтр

<a name=#fliph></a><a name=#flipv></a>
<b>FlipH</b> <b>FlipV</b>
filter: FlipH; filter: FlipV
Создает зеркальное отражение объекта относительно горизонтальной (FlipH) или вертикальной (FlipV) оси

original blur
FLIP
FLIP
Оригинал Фильтр

<A name=#invert> </a>
<b>invert</b>

filter: Invert инвертирует пиксели объекта.

original blur
INVERT
INVERT
Оригинал Фильтр


<A name=#invert> </a> <b>light</b>

filter: Light

Добавляет источник свет, действующий на объект. В виду комплексности этого фильтра, я опишу его немного позже, о чем обязательно сообщу.

<A name=#mask> </a>
<b>mask</b>

filter: Mask(Color=<I>цвет</I> Прозрачные пиксели объекта выводятся цветом Color, а непрозрачные — становятся прозрачными.

MASK
MASK
Оригинал Фильтр


<A name=#shadow> </a>

<b>shadow</b>

filter: Shadow(Color=<I>цвет</I>, Direction=<I>направление</I>) Создает силует от одной из сторон объекта цветом Color в направлении Direction (задается как и в фильтре <A href=»#blur»>Blur</A>).

SHADOW
SHADOW
Оригинал Фильтр

<A name=#wave> </a>
<b>wave</b>

filter: Wave(Add=<I>оригинал</I>, Freq=<I>частота</I>, LightStrength=<I>величина</I>, Phase=<I>начальная фаза</I>, Strength=<I>величина</I>) Производит «синусоидальное» искажение объекта вдоль вертикальной оси. Freq — количество пиков, LightStrength — величина подсветки, Phase — начальная фаза, по умолчанию — 0, изменяется от 0 до 100, таким образом 25 соответствует 90<SUP>о</SUP>, Strength — величина смещения.

original blur
WAVE
WAVE
Оригинал Фильтр


<A name=#xray></a>
<b>xray</b>

filter: Xray Изменяет глубину цвета и отображает объект в черно-белом варианте. По идее должно напоминать рентгеновский снимок

original blur
Оригинал Фильтр

Фильтры можно комбинировать. Для этого, просто, перечисляем их подряд. Например: filter: Blur(Add=1, Direction=90, Strength=25) Invert FlipV

original blur
Оригинал Фильтр

alexvolkov

Предыдущий материал
  • Программирование

Введение в XML

  • 06.11.2001
  • alexvolkov
Read More
Следующий материал
  • DHTML

Создание и использование атрибутов

  • 12.11.2001
  • alexvolkov
Read More
Вас также может заинтересовать
Read More
  • DHTML

Создание и использование атрибутов

  • alexvolkov
  • 12.11.2001
Read More
  • DHTML

Отображение и скрытие элементов в IE и NN

  • alexvolkov
  • 02.11.2001
Read More
  • DHTML

Позиционирование для IE и NN

  • alexvolkov
  • 02.11.2001
Read More
  • DHTML

Позиционирование элементов

  • alexvolkov
  • 26.10.2001
Read More
  • DHTML

внешние файлы в IE и NN

  • alexvolkov
  • 23.10.2001
Read More
  • DHTML

Динамические элементы

  • alexvolkov
  • 07.09.2001

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter