Учебник по CSS

Данный справочник создан на основе материалов, находящихся на сайте Справочник Web-языков www.spravkaweb.ru
Дата создания справочника: 9.11.2004

Если Вы нашли ошибки в справочнике, или у Вас есть предложения по его улучшению, прошу писать на майл.

Скачать обновленный справочник можно отсюда

Содержание:

CSS
  • Что такое CSS и как применить
  • Свойства шрифта
  • Цветовая гамма
  • Свойства текста
  • Свойства текста, содержащего иероглифы
  • Расположение элементов
  • Границы элементов
  • Классификации
  • Принтер
  • Псевдостили гиперссылок
  • Псевдостили текста
  • Правила
  • Единицы измерения CSS
    • Фильтры в Internet Explorer
  • Пару вводных слов
  • Статические фильтры
  • Динамические фильтры
  • Barn
  • Blinds
  • CheckerBoard
  • Fade
  • GradientWipe
  • Inset
  • Iris
  • Pixelate
  • RadialWipe
  • RandomBars
  • RandomDissolve
  • Slide
  • Spiral
  • Stretch
  • Strips
  • Wheel
  • ZigZag

    • Что такое CSS и как применить

    Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Елси до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

    Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:

    <P><FONT color="blue">Это синий текст</FONT></P>

    А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

    P.bluetext { color: blue }

    Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

    В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

    <P class="bluetext">Это синий текст</P>

    Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

    Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:

    P { color: blue }

    Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

    .bluetext{ color: blue }

    И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

    <H1 class="bluetext">Это синий цвет</H1>
    <CENTER class="bluetext">Это синий цвет</CENTER>
    Это <B class="bluetext">жирный синий</B> текст

    Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

    H7 B { color: blue }

    И теперь:

    <H7><B>Этот</B> текст будет синим</H7>
    <P>А <B>этот</B> - не будет!</P>

    Более того, вы можете встроить определение стиля прямо в тег:

    <P style="color: blue">Это синий текст</P>

    Это достигается при помощи атрибута style, который также поддерживают все теги HTML.
    И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

    #headerofdocument { font-size: 20pt }

    Здесь мы задали размер шрифта 20 пунктов.

    <H1 id="headerofdocument">Это заголовок документа</H1>

    Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

    P { color: blue; fotn-size: 9ptl; text-align: center }

    Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>:

    <Style [type="text/css"]>
    . . .
    </STYLE>

    Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css.

    Таблицу стилей можно вынести в отдельный файл и использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу стилей:

    <LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">

    Свойства шрифта

    font - задает параметры шрифта элемента страницы.
    Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.
    font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];
    Значение по умолчанию - normal normal normal medium normal "Times New Roman".
    Альтернативный формат:
    font: caption|icon|menu|message-box|small-caption|status-bar;
    В этом случае доступны шесть предопределенных значений, задающие один из стандартных шрифтов, используемых в элементах интерфейса Windows:
    font: caption; - шрифт заголовка кнопок, текстовых меток и т.п.;
    font: icon; - шрифт подписей под пиктограммами;
    font: menu; - шрифт пунктов меню;
    font: message-box; - шрифт содержимого стандартных окон-предупреждений;
    font: small-caption; - мелкий шрифт заголовков;
    font: status-bar; - шрифт содержимого строки состояния.
    Поддерживается IE начиная с 4.0

    font-family - указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.
    font-family: {Имя шрифта}|serif|san-serif|cursive|fantasy|monospace;
    В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.
    font-family: "Times New Roman",sans-serif;
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    font-weight - задает "жирность" шрифта, используемого в элементе страницы.
    font-weight: normal|bold|bolder|lighter|100..900;
    "Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.
    font-weight: normal; - обычный;
    font-weight: lighter; - светлее;
    font-weight: bold; - жирный;
    font-weight: bolder; - жирнее;
    font-weight: от 100 до 900 - любое значение, кратное 100 (200,700).
    Значение по умолчанию normal.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых. При этом IE 4.0 и более старые версии распознавали только значения normal и bold этого атрибута.
    Поддерживается NN начиная с 4.0

    font-size - задает размер шрифта, используемого в элементе страницы.
    font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{Абсолютный размер}|{Относительный размер}%;
    Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя. Также доступны девять определенных значений.
    font-size: 200% - относительная величина (проценты)
    font-size: 150px - размер в пикселях
    font-size: 300pt - размер в пунктах
    font-size: {xx-small,small,medium,large,x-large,xx-large} - задают один из семи размеров шрифтов, поддерживаемых HTML
    font-size: {smaller,larger} - задают размер шрифта, который на размер либо больше, либо меньше родительского шрифта соответственно
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    font-style - задает начертание шрифта.
    font-style: normal|italic|oblique;
    font-style: normal; - задает обычный вид шрифта (используется по умолчанию);
    font-style: italic - курсивное начертание;
    font-style: obligue - наклонное начертание (легкий наклон нормального шрифта) (IE отображает как курсив, а NN не поддерживает).
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    font-variant - задает вид малых букв шрифта, используемого в элементе страницы.
    font-variant: normal|small-caps;
    font-variant: normal; - задает обычный вид малых букв шрифта (используется по умолчанию);
    font-variant: small-caps; - делает их такими же, как большие буквы, только меньшего размера (капитель).
    Поддерживается IE начиная с 4.0

    Цветовая гамма

    color - Определяет цвет элемента.
    color: {Цвет};
    Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых. Поддерживается NN начиная с 4.0

    background - задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
    background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
    Значения этих свойств могут располагаться в любом порядке.
    Значение по умолчанию transparent none repeat scroll 0% 0%.
    Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0

    background-color - задает фоновый цвет Web-страницы или ее элемента.
    background-color: {Цвет}|transparent;
    Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию.
    Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
    Поддерживается NN начиная с 4.0

    background-image - задает фоновый рисунок Web-страницы или ее элемента.
    background-image: url({Интернет-адрес файла рисунка})|none;
    Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.
    Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
    Поддерживается NN начиная с 4.0

    background-attachment - данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
    background-attachment: scroll|fixed;
    background-attachment: scroll; - фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);
    background-attachment: fixed; - фоновое изображение фиксируется на одном месте и не прокручивается с содержимым страницы.
    Применяется только для тега <BODY>.
    Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

    background-repeat - устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.
    Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения.
    background-repeat: repeat|no-repeat|repeat-x|repeat-y;
    background-repeat: repeat; - размножает фоновое изображение во всех направлениях (значение по умолчанию);
    background-repeat: no-repeat; - запрещает фоновому изображению повторяться;
    background-repeat: repeat-x; - размножает фоновое изображение только по горизонтали;
    background-repeat: repeat-y; - размножает фоновое изображение только по вертикали.
    Поддерживается IE начиная с 4.0

    background-position - задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий атрибуты background-position-x и background-position-y.
    background-position: [{background-position-x}] [{background-position-y}];
    Если задана только одна координата, то она считается горизонтальной, а для вертикальной принимается значение 50%.
    Значение по умолчанию 0% 0%.
    Поддерживается IE начиная с 4.0

    background-position-x - задает горизонтальную координату фонового рисунка.
    background-position-x: {X}|{X}%|left|center|right;
    Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно.
    Значение по умолчанию 0%.
    Поддерживается IE начиная с 4.0

    background-position-y - задает вертикальную координату фонового рисунка.
    background-position-y: {Y}|{Y}%|top|center|bottom;
    Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom, которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно.
    Значение по умолчанию 0%.
    Поддерживается IE начиная с 4.0

    scrollbar-3dlight-color - задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.
    scrollbar-3dlight-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-arrow-color - задает цвет стрелок на кнопках полосы прокрутки.
    scrollbar-arrow-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-base-color - задает цвет бегунка и кнопок-стрелок полосы прокрутки.
    scrollbar-base-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-darkshadow-color - задает цвет "тени", отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних гранией).
    scrollbar-darkshadow-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-face-color - задает цвет бегунка и кнопок прокрутки полосы прокрутки.
    scrollbar-face-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-highlight-color - задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).
    scrollbar-highlight-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-shadow-color - задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.
    scrollbar-shadow-color: {Цвет};
    Поддерживается IE начиная с 5.5

    scrollbar-track-color - задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок.
    scrollbar-track-color: {Цвет};
    Поддерживается IE начиная с 5.5

    Свойства текста

    text-decoration - задает специальное оформление текста: подчеркнутый, зачеркнутый и т.п.
    text-decoration: none|underline|overline|line-through|blink;
    text-decoration: none; - отменяет любое специальное оформление (значение по умолчанию для большинства тегов);
    text-decoration: underline; - подчеркивает текст (значение по умолчанию для тегов <A>, <INS> и <U>);
    text-decoration: overline; - черта сверху текста;
    text-decoration: line-through; - зачеркивает текст (значение по умолчанию для тегов <DEL>, <S> и <STRIKE>);
    text-decoration: blink; - мигание текста (отсутствует в IE)
    text-decoration: uppercase - все буквы становятся заглавными;
    text-decoration: lowercase - все буквы становятся маленькими (прописными);
    text-decoration: capitalize - каждое слово в строке начинается с большой буквы.
    Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    text-underline-position - задает местонахождение линии подчеркивания: выше или ниже текста. Имеет смысл, если атрибут text-decoration равен underline или overline.
    text-underline-position: below|above;
    text-underline-position: below; - помещает линию подчеркивания под текстом (значение по умолчанию);
    text-underline-position: above; - над текстом ("надчеркивание").
    Поддерживается IE начиная с 5.5

    text-align - определяет горизонтальное выравнивание текста.
    text-align: left|right|center|justify;
    text-align: left; - выравнивание текста по левому краю (значение по умолчанию);
    text-align: right; - выравнивание по правому краю;
    text-align: center; - выравнивание по центру;
    text-align: justify; - выравнивание по обоим краям (по ширине).
    Поддерживается IE начиная с 3.02; значение justify поддерживается начиная с 4.0
    Поддерживается NN начиная с 4.0

    text-align-last - задает горизонтальное выравнивание последней строки абзаца.
    text-align-last: auto|inherit|left|right|center|justify;
    text-align: auto; - выравнивает последнюю строку абзаца так же, как и остальные строки (основываясь на значении атрибута text-align) (значение по умолчанию);
    text-align: inherit; - так же, как выровнен текст родителя;
    text-align: left; - выравнивание текста по левому краю;
    text-align: right; - выравнивание по правому краю;
    text-align: center; - выравнивание по центру;
    text-align: justify; - выравнивание по обоим краям (по ширине).
    Поддерживается IE начиная с 5.5

    text-indent - устанавливает отступ красной строки.
    text-ident: {Отступ}|{Отступ}%;
    Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0.
    Поддерживается IE и NN начиная с 4.0

    text-height - интервал между строками текста.
    text-height: {Интервал}|{Интервал}%;
    Интервал может быть задан как абсолютной величиной, так и процентом от ширины родителя.
    Поддерживается IE и NN начиная с 4.0

    text-transform - Задает преобразование регистра символов текста.
    text-transform: none|capitalize|uppercase|lowercase;
    text-transform: none; - отключает любые преобразования регистра символов (значение по умолчанию);
    text-transform: capitalize; - преобразует первую букву каждого слова текста в верхний регистр;
    text-transform: uppercase; - преобразует все символы текста в верхний регистр;
    text-transform: lowercase; - в нижний регистр.
    Поддерживается IE и NN начиная с 4.0

    clear - задает поведение текста при "обтекании" им некоторых элементов страницы, таких как изображения.
    clear: none|left|right|all;
    Атрибут задается для текста, а не для элемента страницы, который он будет "обтекать".
    clear: none; - разрешает тексту "обтекать" элемент страницы (значение по умолчанию);
    clear: left; - запрещает тексту "обтекать" элемент страницы с левой стороны;
    clear: right; - с правой стороны;
    clear: all; - с обеих сторон.
    Поддерживается IE и NN начиная с 4.0

    word-spacing - определяет дополнительное расстояние между словами в тексте.
    word-spacing: normal|{Величина};
    Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.
    Значение по умолчанию normal.
    Поддерживается IE начиная с 4.0

    word-wrap - устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам.
    word-wrap: normal|break-word;
    word-wrap: normal; - запрещает переносить строки по словам (значение по умолчанию);
    word-wrap: break-word; - разрешает.
    Поддерживается IE начиная с 5.5

    word-mode - задает направление строк текста: горизонтальное или вертикальное.
    word-mode: lr-tb|tb-rl;
    word-mode: lr-tb; - задает обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);
    word-mode: tb-rl; - поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.
    Поддерживается IE начиная с 5.5

    leter-spacing - определяет расстояние между символами в тексте.
    letter-spacing: normal|{Величина};
    Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.
    Значение по умолчанию normal.
    Поддерживается IE начиная с 4.0

    line-height - задает вертикальное расстояние между строками текста.
    line-height: normal|{Y}|{Y}%;
    Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение normal задает стандартное расстояние.
    Значение по умолчанию normal.
    Поддерживается IE и NN начиная с 4.0

    direction - задает порядок чтения текста: слева направо или справа налево.
    direction: ltr|rtl|inherit;
    direction: ltr; - задает порядок чтения слева направо (значение по умолчанию);
    direction: rtl; - справа налево;
    direction: inherit; - заставляет наследовать порядок чтения у родителя.
    Для документов, составленных на европейских языках, порядок чтения всегда слева направо (ltr).
    Поддерживается IE начиная с 5.0

    unicode-bidi - задает поведение встроенных элементов при изменении направления письма с помощью атрибута direction.
    unicode-bidi: normal|embed|bidi-override;
    unicode-bidi: normal; - меняет направление письма и у родителя (используется по умолчанию);
    unicode-bidi: embed; - меняет направление письма только у встроенного элемента;
    unicode-bidi: bidi-override; - аналогично embed за тем исключением, что направление письма меняется согласно значению атрибута direction, независимо от локальных установок Web-обозревателя.
    Поддерживается IE начиная с 5.0

    accelerator - позволяет указать, содержит ли текст элемента страницы клавишу-ускоритель.
    accelerator: true|false;
    Клавиша-ускоритель - это особая клавиша на клавиатуре, при нажатии которой вместе с клавишей <Alt> происходит переход к данному элементу страницы.
    accelerator: true; - указывает, что текст содержит клавишу-ускоритель;
    accelerator: false; - не содержит.
    Значения по умолчанию не имеет.
    Пример использования:
    <LABEL for="txtName"><U style="accelerator: true">И</U>мя</LABEL>
    <INPUT type="text" id="txtName" accesskey="B" value="Имя пользователя">
    В этом случае символ "И" в слове "Имя" будет подчеркнут. Если в региональных настройках операционной системы Windows 2000 была выбрана опция Скрыть индикаторы клавиш-ускорителей до нажатия Alt, этот символ не будет подчеркнут, пока пользователь не нажмет клавишу <Alt> на клавиатуре.
    Поддерживается IE начиная с 5.0

    Свойства текста, содержащего иероглифы

    text-justify - задает тип текста по ширине. Значение атрибута text-align при этом должно быть равно justify.
    text-justify: auto|newspaper|distribute|distribute-all-lines|distribute-center-last|inter-word|inter-ideograph|inter-cluster|kashida;
    text-justify: auto; - отдает управление выравниванием по ширине на усмотрение Web-обозревателя (используется по умолчанию);
    text-justify: newspaper; - выравнивает строки, изменяя расстояние между словами и между символами;
    text-justify: distribute; - аналогично newspaper и предназначено для азиатских языков (тайский и пр.);
    text-justify: distribute-all-lines; - аналогично distribute за тем исключением, что последняя строка абзаца подвергается полному выравниванию. Предназначено для иероглифических языков;
    text-justify: distribute-center-last; - не реализовано;
    text-justify: inter-word; - выравнивает строки, изменяя только расстояние между словами;
    text-justify: inter-ideograph; - выравнивает строки иероглифического текста, изменяя расстояния между словами и между иероглифами;
    text-justify: inter-cluster; - выравнивает строки текста на азиатских языках, не содержащих пробелов между словами;
    text-justify: kashida; - выравнивает строки текста на арабском языке, изменяя ширину самих символов.
    Поддерживается IE начиная с 5.0

    text-autospace - позволяет установить, будет ли добавлять дополнительное пространство между фрагментами текста, написанными на разных языках.
    text-autospace: none|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space;
    text-autospace: none; - запрещает добавлять дополнительное пространство между фрагментами текста (используется по умочанию);
    text-autospace: ideograph-alpha; - добавляет дополнительное пространство между иероглифическими и неиероглифическими (литинскими, кириллистическими, греческими и т.д.) фрагментами текста;
    text-autospace: ideograph-numeric; - добавляет дополнительное пространство между иероглифическим текстом и цифрами;
    text-autospace: ideograph-parenthesis; - добавляет дополнительное пространство между иероглифическим текстом и круглыми скобками;
    text-autospace: ideograph-space; - увеличивает ширину пробелов, граничащих с иероглифическим текстом.
    Поддерживается IE начиная с 5.0

    text-kashida-space - задает процент, на который будут расширяться символы арабского языка при выравнивании текста по ширине. Можно использовать только, если атрибут text-justify равен auto, distribute, kashida или newspaper.
    text-kashida-space: {Расширение}%|inherit;
    Величина отступа может быть задана как процент свободного пространства между символами, на которое они могут расширяться. Значение 0% (используется по умолчанию) означает, что расширение символов недопустимо, а вместо них будет расширяться свободное пространство; значение 100% - что допустимо расширение только символов, но не свободного пространства.
    Поддерживается IE начиная с 5.5

    line-break - задает правила разрыва строк для текста на японском языке.
    line-break: normal|strict;
    line-break: normal; - задает обычные правила разрыва японского текста (значение по умолчанию);
    line-break: strict; - задает строгие правила.
    Поддерживается IE начиная с 5.0

    word-break - включает или отключает поддержку переноса строк по словам (а не только по пробелам) для текстов, содержащих фрагменты на разных языках.
    word-break: normal|break-all|keep-all;
    word-break: normal; - разрешает строкам "разрываться" по слову (используется по умолчанию);
    word-break: break-all; - предназначено для текстов на азиатских языках с небольшими иноязычными фрагментами;
    word-break: keep-all; - предназначено для текстов, включающих фрагменты на иероглифических языках.
    Поддерживается IE начиная с 5.0

    ime-mode - задает состояние IME (Input Method Editor - редактор способа ввода), с помощью которого вводятся иероглифические тексты на китайском, корейском и японском языках. Этот атрибут применяется только для полей ввода.
    ime-mode: auto|active|inactive|disabled;
    ime-mode: auto; - передает управление IME Web-обозревателю (значение по умолчанию);
    ime-mode: active; - активизирует IME. Пользователь может его деактивизировать;
    ime-mode: inactive; - деактивизирует IME. Пользователь может его активизировать;
    ime-mode: disabled; - отключает IME.
    Поддерживается IE начиная с 5.0

    layout-flow - задает направление написания текста: по горизонтали или по вертикали.
    layout-flow: horizontal|vertical-ideographic;
    layout-flow: horozontal; - задает горизонтальное направление написания текста (значение по умолчанию);
    layout-flow: vertical-ideographic; - вертикальное направление написания текста.
    Поддерживается IE начиная с 5.5. В настоящее время признан устаревшим; вместо него рекомендуется использовать атрибут writing-mode.

    layout-grid - задает параметры разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках. Заменяет атрибуты layout-grid-char, layout-grid-line, layout-grid-mode и layout-grid-type.
    layout-grid: [{layout-grid-char}] [{layout-grid-line}] [{layout-grid-mode}] [{layout-grid-type}]
    Значения этих атрибутов могут распологаться в любом порядке.
    Значение по умолчанию - both loose none none.
    Поддерживается IE начиная с 5.0

    layout-grid-char - задает шаг горизонтальной разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках.
    layout-grid-char: none|auto|{Y}{Y}%;
    Шаг разметки может быть задан как абсолютной величиной, так и процентом от шага разметки родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать шаг разметки по максимальному символу текста. Другое предопределенное значение none вообще отключает разметку.
    Значение по умолчанию - none.
    Поддерживается IE начиная с 5.0

    layout-grid-line - задает шаг вертикальной разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках.
    layout-grid-line: none|auto|{Y}{Y}%;
    Шаг разметки может быть задан как абсолютной величиной, так и процентом от шага разметки родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать шаг разметки по максимальному символу текста. Другое предопределенное значение none вообще отключает разметку.
    Значение по умолчанию - none.
    Поддерживается IE начиная с 5.0

    layout-grid-mode - задает тип разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках.
    layout-grid-mode: both|none|char|line;
    layout-grid-mode: both; - задает использование и горизонтальной, и вертикальной разметок (используется по умолчанию);
    layout-grid-mode: none; - отключает разметку;
    layout-grid-mode: char; - задает использование горизонтальной разметки;
    layout-grid-mode: line; - задает использование вертикальной разметки.
    Поддерживается IE начиная с 5.0

    layout-grid-type - задает режим форматирования иероглифических текстов на китайском, корейском и японском языках с использованием разметки элемента страницы.
    layout-grid-type: loose|strict|fixed;
    layout-grid-type: loose; - задает "гибкое" форматирование, используемое для корейских и японских текстов (используется по умолчанию);
    layout-grid-type: strict; - задает более строгое форматирование, используемое для китайских, корейских и японских текстов;
    layout-grid-type: fixed; - задает самое строгое форматирование, когда символы жестко привязываются к разметке.
    Поддерживается IE начиная с 5.0

    Расположение элементов

    margin - задает ширины полей между элементами страницы и его соседями. Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left.
    margin: {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}];
    Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    margin-top - задает верхнее поле между элементом страницы и его соседями сверху.
    margin-top: auto|{Y}|{Y}%;
    Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    margin-right - задает правое поле между элементом страницы и его соседями справа.
    margin-right: auto|{X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    margin-bottom - задает нижнее поле между элементом страницы и его соседями снизу.
    margin-bottom: auto|{Y}|{Y}%;
    Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    margin-left - задает левое поле между элементом страницы и его соседями слева.
    margin-left: auto|{X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    padding - задает отступ между элементом страницы и различными границами. Заменяет атрибуты padding-top.
    margin-left: auto|{X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
    Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
    Поддерживается NN начиная с 4.0

    padding-top - задает расстояние между элементом страницы и верхней границей.
    pading-top: {Y}|{Y}%;
    Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.
    Значение по умолчанию 0, для тега <TD> 1.
    Поддерживается IE и NN начиная с 4.0

    padding-right - задает расстояние между элементом страницы и правой границей.
    pading-right: {X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.
    Значение по умолчанию 0, для тега <TD> 1.
    Поддерживается IE и NN начиная с 4.0

    padding-bottom - задает отступ между элементом страницы и нижней границей.
    pading-bottom: {Y}|{Y}%;
    Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.
    Значение по умолчанию 0, для тега <TD> 1.
    Поддерживается IE и NN начиная с 4.0

    padding-left - задает расстояние между элементом страницы и левой границей.
    pading-left: {X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.
    Значение по умолчанию 0, для тега <TD> 1.
    Поддерживается IE и NN начиная с 4.0

    width - задает ширину свободно позиционирования элемента.
    width: auto|{X}|{X}%;
    Ширина может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать ширину элемента самостоятельно.
    Значение по умолчанию auto.
    Поддерживается IE и NN начиная с 4.0

    height - задает высоту свободно позиционированного элемента.
    height: auto|{X}|{X}%;
    Высота может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
    Значение по умолчанию auto.
    Поддерживается IE и NN начиная с 4.0

    top - задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя.
    top: auto|{Y}|{Y}%;
    Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
    Значение по умолчанию auto.
    Поддерживается IE и NN начиная с 4.0

    bottom - задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя.
    bottom: auto|{Y}|{Y}%;
    Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
    Значение по умолчанию auto.
    Поддерживается IE начиная с 4.0

    left - задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя.
    left: auto|{X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
    Значение по умолчанию auto.
    Поддерживается IE и NN начиная с 4.0

    right - задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя.
    right: auto|{X}|{X}%;
    Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
    Значение по умолчанию auto.
    Поддерживается IE начиная с 4.0

    float - определяет обтекание элемента другими слева или справа вместо помещения под ним.
    float: none|left|right;
    float: none; - заставляет элемент страницы появляться там, где он задан (используется по умолчанию);
    float: left; - принудительно выравнивает элемент страницы по левому краю;
    float: right; - по правому краю.
    Поддерживается IE начиная с 4.0 для кнопок и внедренных объектов и начиная с 5.0 - для остальных элементов страницы.
    Поддерживается NN начиная с 4.0

    vertical-align - задает вертикальное выравнивание элемента страницы внутри родителя.
    vertical-align: auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom;
    vertical-align: auto; - выравнивает элемент страницы согласно значению атрибута layout-flow;
    vertical-align: baseline; - задает выравнивание базовой линии элемента страницы по базовой линии родителя (используется по умолчанию);
    vertical-align: sub; - превращает текст в нижний индекс;
    vertical-align: super; - превращает текст в верхний индекс;
    vertical-align: top; - выравнивает верх элемента страницы по самому верху родителя;
    vertical-align: text-top; - выравнивает верх текста элемента страницы по верху текста родителя;
    vertical-align: middle; - выравнивает центр элемента страницы по центру родителя;
    vertical-align: bottom; - выравнивает низ элемента страницы по низу родителя;
    vertical-align: text-bottom; - выравнивает низ текста элемента страницы по низу текста родителя.
    Поддерживается IE начиная с 4.0

    overflow - задает поведение элемента страницы, если содержимое в нем не помещается.
    overflow: visible|scroll|hidden|auto;
    overflow: visible; - заставляет элемент страницы расшириться так, чтобы все его содержимое было видно (значение по умолчанию);
    overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
    overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
    overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отобаржаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
    Поддерживается IE начиная с 4.0

    overflow-x - задает поведение элемента страницы, если его ширина меньше ширины содержимого.
    overflow-x: visible|scroll|hidden|auto;
    overflow: visible; - заставляет элемент страницы расшириться по горизонтали так, чтобы все его содержимое было видно (значение по умолчанию);
    overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
    overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
    overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отобаржаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
    Поддерживается IE начиная с 4.0

    overflow-y - задает поведение элемента страницы, если его высота меньше высоты его содержимого.
    overflow-y: visible|scroll|hidden|auto;
    overflow: visible; - заставляет элемент страницы расшириться по вертикали так, чтобы все его содержимое было видно (значение по умолчанию);
    overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
    overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
    overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отобаржаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
    Поддерживается IE начиная с 4.0

    zoom - задает масштаб отображения элемента страницы.
    zoom: normal|{Масштаб}|{Масштаб}%;
    Масштаб может быть задан как числом с плавающей точкой, обозначающим степень увеличения или уменьшения, так и процентной величиной. Предопределенное значение normal задает масштаб 1.0 или 100%.
    Значение по умолчанию normal.
    Поддерживается IE начиная с 5.5

    table-lowout - позволяет "зафиксировать" значения ширины ячеек таблицы.
    table-lawout: auto|fixed;
    table-lawout: auto; - устанавливает ширину ячейки по ширине ее содержимого (значение по умолчанию);
    table-lawout: fixed; - использует для установки ширин ячеек значения атрибутов WIDTH или, если они не заданы, просто дает ячейкам равную ширину.
    Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.
    Применяется только для тега <TABLE>.
    Поддерживается IE начиная с 5.0

    Границы элементов

    border - задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.
    border: [{border-color}] [{border-style}] [{border-width}];
    Значение по умолчанию medium none.
    Поддерживается IE начиная с 4.0

    border-color - (IE) задает цвет всех границ элемента страницы. Заменяет атрибуты border-top-color, border-right-color, border-bottom-color и border-left-color.
    border-color: {border-top-color} [{border-right-color}] [{border-bottom-color}] [{border-left-color}];
    Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
    Поддерживается IE начиная с 4.0

    border-color - (NN) задает цвет границ элемента страницы.
    border-color: none|{Цвет};
    Может быть задано либо цветное значение, либо none, обозначающее отсутствие границ.
    Поддерживается NN начиная с 4.0

    border-top-color - задает цвет верхней границы элемента страницы.
    border-top-color: {Цвет};
    Поддерживается IE начиная с 4.0

    border-bottom-color - задает цвет нижней границы элемента страницы.
    border-bottom-color: {Цвет};
    Поддерживается IE начиная с 4.0

    border-left-color - задает цвет левой границы элемента страницы.
    border-left-color: {Цвет};
    Поддерживается IE начиная с 4.0

    border-right-color - задает цвет правой границы элемента страницы.
    border-right-color: {Цвет};
    Поддерживается IE начиная с 4.0

    border-style - задает тип сразу всех границ элемента страницы в один прием. Заменяет атрибуты border-top-style, border-right-style, border-bottom-style и border-left-style.
    border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
    border-style: none; - запрещает рисование границы (значение по умолчанию);
    border-style: dotted; - рисует точечную линию (не поддерживается в NN);
    border-style: dashed; - рисует штриховую линию (не поддерживается в NN);
    border-style: solid; - рисует сплошную линию;
    border-style: double; - рисует двойную сплошную линию;
    border-style: groove; - рисует трехмерную вдавленную границу;
    border-style: ridge; - рисует трехмерную выпуклую границу;
    border-style: inset; - рисует трехмерную "ступеньку вверх";
    border-style: outset; - рисует трехмерную "ступеньку вниз".
    Поддерживается IE и NN начиная с 4.0

    border-top-style - задает тип верхней границы элемента страницы.
    border-top-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
    border-top-style: none; - запрещает рисование границы (значение по умолчанию);
    border-top-style: dotted; - рисует точечную линию (не поддерживается в NN);
    border-top-style: dashed; - рисует штриховую линию (не поддерживается в NN);
    border-top-style: solid; - рисует сплошную линию;
    border-top-style: double; - рисует двойную сплошную линию;
    border-top-style: groove; - рисует трехмерную вдавленную границу;
    border-top-style: ridge; - рисует трехмерную выпуклую границу;
    border-top-style: inset; - рисует трехмерную "ступеньку вверх";
    border-top-style: outset; - рисует трехмерную "ступеньку вниз".
    Поддерживается IE начиная с 4.0

    border-bottom-style - задает тип нижней границы элемента страницы.
    border-bottom-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
    border-bottom-style: none; - запрещает рисование границы (значение по умолчанию);
    border-bottom-style: dotted; - рисует точечную линию (не поддерживается в NN);
    border-bottom-style: dashed; - рисует штриховую линию (не поддерживается в NN);
    border-bottom-style: solid; - рисует сплошную линию;
    border-bottom-style: double; - рисует двойную сплошную линию;
    border-bottom-style: groove; - рисует трехмерную вдавленную границу;
    border-bottom-style: ridge; - рисует трехмерную выпуклую границу;
    border-bottom-style: inset; - рисует трехмерную "ступеньку вверх";
    border-bottom-style: outset; - рисует трехмерную "ступеньку вниз".
    Поддерживается IE начиная с 4.0

    border-left-style - задает тип левой границы элемента страницы.
    border-left-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
    border-left-style: none; - запрещает рисование границы (значение по умолчанию);
    border-left-style: dotted; - рисует точечную линию (не поддерживается в NN);
    border-left-style: dashed; - рисует штриховую линию (не поддерживается в NN);
    border-left-style: solid; - рисует сплошную линию;
    border-left-style: double; - рисует двойную сплошную линию;
    border-left-style: groove; - рисует трехмерную вдавленную границу;
    border-left-style: ridge; - рисует трехмерную выпуклую границу;
    border-left-style: inset; - рисует трехмерную "ступеньку вверх";
    border-left-style: outset; - рисует трехмерную "ступеньку вниз".
    Поддерживается IE начиная с 4.0

    border-right-style - задает тип правой границы элемента страницы.
    border-right-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
    border-right-style: none; - запрещает рисование границы (значение по умолчанию);
    border-right-style: dotted; - рисует точечную линию (не поддерживается в NN);
    border-right-style: dashed; - рисует штриховую линию (не поддерживается в NN);
    border-right-style: solid; - рисует сплошную линию;
    border-right-style: double; - рисует двойную сплошную линию;
    border-right-style: groove; - рисует трехмерную вдавленную границу;
    border-right-style: ridge; - рисует трехмерную выпуклую границу;
    border-right-style: inset; - рисует трехмерную "ступеньку вверх";
    border-right-style: outset; - рисует трехмерную "ступеньку вниз".
    Поддерживается IE начиная с 4.0

    border-width - задает толщину всех границ элемента страницы. Заменяет атрибуты border-top-width, border-right-width, border-bottom-width и border-left-width.
    border-width: {border-top-width} [{border-right-width}] [{border-bottom-width}] [{border-left-width}];
    Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится в верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
    Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
    Значение по умолчанию medium.
    Поддерживается IE и NN начиная с 4.0

    border-top-width - задает толщину верхней границы элемента страницы.
    border-top-width: medium|thin|thick|{Толщина};
    Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
    Значение по умолчанию medium.
    Поддерживается IE и NN начиная с 4.0

    border-bottom-width - задает толщину нижней границы элемента страницы.
    border-bottom-width: medium|thin|thick|{Толщина};
    Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
    Значение по умолчанию medium.
    Поддерживается IE и NN начиная с 4.0

    border-left-width - задает толщину левой границы элемента страницы.
    border-left-width: medium|thin|thick|{Толщина};
    Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
    Значение по умолчанию medium.
    Поддерживается IE и NN начиная с 4.0

    border-right-width - задает толщину правой границы элемента страницы.
    border-right-width: medium|thin|thick|{Толщина};
    Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
    Значение по умолчанию medium.
    Поддерживается IE и NN начиная с 4.0

    border-top - задает все свойства верхней границы элемента страницы за один прием. Заменяет атрибуты border-top-color, border-top-style и border-top-width. Значения этих атрибутов могут располагаться в любом порядке.
    border-top: [{border-top-color}] [{border-top-style}] [{border-top-width}];
    Значение по умолчанию medium none.
    Поддерживается IE начиная с 4.0

    border-bottom - задает все свойства нижней границы элемента страницы за один прием. Заменяет атрибуты border-bottom-color, border-bottom-style и border-bottom-width. Значения этих атрибутов могут распологаться в любом порядке.
    border-bottom: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];
    Значение по умолчанию medium none.
    Поддерживается IE начиная с 4.0

    border-left - задает все свойства левой границы элемента страницы за один прием. Заменяет атрибуты border-left-color, border-left-style и border-left-width. Значения этих атрибутов могут распологаться в любом порядке.
    border-left: [{border-left-color}] [{border-left-style}] [{border-left-width}];
    Значение по умолчанию medium none.
    Поддерживается IE начиная с 4.0

    border-right - задает все свойства правой границы элемента страницы за один прием. Заменяет атрибуты border-right-color, border-right-style и border-right-width. Значения этих атрибутов могут распологаться в любом порядке.
    border-right: [{border-right-color}] [{border-right-style}] [{border-right-width}];
    Значение по умолчанию medium none.
    Поддерживается IE начиная с 4.0

    border-collapse - задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет. Применяется только для тега <TABLE>.
    border-collapse: separate|collapse;
    border-collapse: separate; - разделяет границу табилицы и границы ее ячеек (значение по умолчанию);
    border-collapse: collapse; - объединяет их.
    Поддерживается IE начиная с 5.0

    Классификации

    display - определяет, как будет отображаться элемент.
    display: inline|block|none|inline-block|list-item|table-header-group|table-footer-group;
    display: inline; - (значение по умолчанию) заставляет элемент страницы вести себя как встроенный. При этом он располагается внутри текста, его позиция и размеры рассчитываются согласно позиции и размерам текста. Пример встроенного элемента - <I>;
    display: block; - делает элемент страницы блочным. При этом его можно свободно позиционировать. Пример блочного элемента - <DIV>;
    display: none; - делает элемент страницы невидимым. При этом страница отображается так, будто этого элемента вообще не существует;
    display: inline-block; - аналогично inline, но содержимое страницы ведет себя как блочный элемент (не поддерживается NN);
    display: list-item; - аналогично block, но при этом элемент страницы считается позицией списка (ставится маркер);
    display: table-header-group; - заставляет элемент страницы отображаться после верхнего заголовка таблицы и перед всеми строками данных (аналогично тегу <THEAD>) (не поддерживается NN);
    display: table-footer-group; - заставляет элемент страницы отображаться перед основанием таблицы и после всех строк данных (аналогично тегу <TFOOT>) (не поддерживается NN);
    Поддерживается IE и NN начиная с 4.0

    position - устанавливает, каким образом вычисляется положение элемента в плоскости экрана.
    position: static|absolute|relative;
    position: static; - (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего "потока" текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание;
    position: absolute; - задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя;
    position: relative; - задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
    Поддерживается IE и NN начиная с 4.0

    z-index - задает порядок перекрытия свободно позиционированными объектами друг друга.
    z-index: auto|{Порядок перекрытия}|;
    Порядок перекрытия задается положительными или отрицательным целым числом. При этом элементы с большим значением этого атрибута будут перекрывать элементы с меньшим значением. Предопределенное значение auto задает порядок перекрытия по умолчанию, когда элементы, определенные в HTML-коде раньше, перекрываются заданными позже.
    Значение по умолчанию auto.
    Поддерживается IE и NN начиная с 4.0

    visibility - позволяет элементу быть видимым или невидимым на странице.
    visibility: inherit|visible|hidden;
    visibility: inherit - (значение по умолчанию) элемент виден, если его родительский элемент является видимым (наследует видимость);
    visibility: visible - делает элемент страницы видимым;
    visibility: hidden - невидимым.
    Поддерживается IE и NN начиная с 4.0

    clip - задает прямоугольный фрагмент элемента страницы, который будет видим.
    clip: auto|rect({Верхняя граница} {Правая граница} {Нижняя граница} {Левая граница});
    Предопределенное значение auto задает видимость всего элемента страницы. Оно же является значением по умолчанию. Для того чтобы ограничить видимую часть элемента страницы прямоугольным фрагментом, задаются четыре координаты границ этого прямоугольника, разделенные пробелами.
    Поддерживается IE и NN начиная с 4.0

    white-space - задает, будут ли строки текста, содержащегося в элементе страницы, автоматически переноситься, если они не помещаются в нем по ширине.
    white-space: normal|nowrap|pre;
    white-space: normal; - (значение по умолчанию) включает автоматический перенос длинных строк;
    white-space: nowrap; - отключает автоматический перенос строк. Чтобы "разорвать" строку вручную, вставьте в нужном месте тег <BR> (NN не поддерживается);
    white-spice: pre; - не поддерживается;
    Поддерживается IE начиная с 5.5 и NN начиная с 4.0

    cursor - определяет форму курсора мыши, которую он принимает при наведении на элемент страницы.
    cursor: auto|crosshair|default|hand|move|*-resize|text|wait|help;
    cursor: auto - (значение по умолчанию) заставляет Web-обозреватель самому определять нужную форму курсора мыши;
    cursor: crosshair - крестообразный курсор;
    cursor: default - курсор по умолчанию, обычно стрелка;
    cursor: hand - "указывающий перст";
    cursor: move - стрелка, указывающая "на все четыре стороны";
    cursor: e-resize
    cursor: ne-resize
    cursor: nw-resize
    cursor: n-resize
    cursor: se-resize
    cursor: sw-resize
    cursor: s-resize
    cursor: w-resize
    cursor: text - текстовой курсор;
    cursor: wait - "песочные часы", курсор ожидания;
    cursor: help - стрелка с вопросительным знаком.
    Поддерживается IE начиная с 4.0

    list-style - задает параметры маркера или номера позиции списка.
    Заменяет атрибуты list-style-image, list-style-position и list-style-type.
    Значения этих атрибутов могут располагаться в любом порядке.
    list-style: [{list-style-image}] [{list-style-position}] [{list-style-type}];
    Значение по умолчанию disk outside none.
    Поддерживается IE начиная с 4.0

    list-style-image - задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type.
    list-style-image: none|url({Интернет-адрес файла изображения});
    Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type.
    Значение по умолчанию none.
    Поддерживается IE начиная с 4.0

    list-style-position - задает местонахождение маркера позиции списка: в тексте позиции или вне его.
    list-style-position: outside|inside;
    Доступны два значения. Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции. Значение же inside заставляет Web-обозреватель отобразить маркер позиции в ее тексте в качестве первого символа.
    Поддерживается IE начиная с 4.0

    list-style-type - задает тип маркера или номер позиции списка.
    list-style-type: disc|circle|square|decimal|lower|roman|upper-roman|lower-alpha|upper-alpha|none;
    list-style-type: disc; - (значение по умолчанию) отображает сплошной кружок;
    list-style-type: circle; - окружность;
    list-style-type: square; - сплошной квадрат;
    list-style-type: decimal; - нумерует позиции арабскими цифрами;
    list-style-type: lower-roman; - малыми римскими;
    list-style-type: upper-roman; - большими римскими;
    list-style-type: lower-alpha; - помечает позиции малыми латинскими буквами;
    list-style-type: upper-alpha; - большими латинскими;
    list-style-type: none; - вообще убирает маркер или нумерацию.
    Поддерживается IE и NN начиная с 4.0

    Принтер

    page-break-after - устанавливает, будет ли после текущего элемента при печати Web-страницы производиться прогон листа.
    page-break-after: auto|always|empty string;
    page-break-after: auto; - передает управление размещением информации на листе операционной системе (значение по умолчанию);
    page-break-after: always; - заставляет принтер прогнать лист после печати текущего элемента страницы;
    page-break-after: empty string; - запрещает принтеру делать это в любом случае.
    Поддерживается IE начиная с 4.0

    page-break-before - устанавливает, будет ли перед текущего элемента при печати Web-страницы производиться прогон листа.
    page-break-before: auto|always|empty string;
    page-break-before: auto; - передает управление размещением информации на листе операционной системе (значение по умолчанию);
    page-break-before: always; - заставляет принтер прогнать лист перед печатью текущего элемента страницы;
    page-break-before: empty string; - запрещает принтеру делать это в любом случае.
    Поддерживается IE начиная с 4.0

    Псевдостили гиперссылок

    Псевдостили применяются к гиперссылкам <A>.

    active - применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя.
    {Задание стиля гиперссылки}:active {Определение стиля};
    Аналогичен атрибуту alink тега <BODY>.
    Пример:
    A:active {color: lime;}
    ктивная гиперссылка будет ярко-зеленой.
    По умолчанию в IE активные гиперссылки выделяются красным цветом.
    Поддерживается IE начиная с 4.0

    hover - применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши.
    {Задание стиля гиперссылки}:hover {Определение стиля};
    Пример:
    A:hover {color: lime; text-decoration: none;}
    Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой.
    По умолчанию в IE гиперссылки подчеркиваются, когда пользователь помещает над ними курсор мыши.
    Поддерживается IE начиная с 4.0

    link - применяется к не посещенным еще пользователем гиперссылкам.
    {Задание стиля гиперссылки}:link {Определение стиля};
    Аналогичен атрибуту link тега <BODY>.
    Пример:
    A:link {color: black;}
    По умолчанию в IE непосещенные гиперссылки отображаются синим цветом.
    Поддерживается IE начиная с 3.02

    visited - применяется к уже посещенным пользователем гиперссылкам.
    {Задание стиля гиперссылки}:visited {Определение стиля};
    Аналогичен атрибуту vlink тега <BODY>.
    Пример:
    A:link {color: indigo;}
    По умолчанию в IE посещенные гиперссылки отображаются бордовым цветом.
    Поддерживается IE начиная с 3.02

    Псевдостили текста

    Псевдостили применяются некоторым элементам текстовых абзацев, например, к первой строке абзаца или первой букве первой строки.

    first-letter - применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц.
    {Задание стиля абзаца}:first-letter {Определение стиля};
    Пример:
    st:first-letter {font-size: 16pt;}
    По умолчанию в IE первые буквы первых строк абзацев никак не выделяются.
    Поддерживается IE начиная с 5.0

    first-line - применяется к первой строке абзаца.
    {Задание стиля абзаца}:first-line{Определение стиля};
    Пример:
    st:first-line {text-decoration: underline;}
    По умолчанию в IE первые строки абзацев никак не выделяются.
    Поддерживается IE начиная с 5.0

    Правила

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

    charset - Задает текстовую кодировку для внешней таблицы стилей.
    @charset {Кодировка};
    Пример:
    @charset "windows-1251";
    Может использоваться только во внешних таблицах стилей; должна быть первой строкой в файле.
    Поддерживается IE начиная с 4.0

    font-face - задает файл загружаемого шрифта для использования на Web-странице.
    @font-face {Определение загружаемого шрифта};
    Определение загружаемого шрифта имеет следующий формат:
    font-family: {Имя шрифта}
    src: url({Интернет-адрес файла шрифта}) }
    Пример:
    @font-face {
    font-family: comic;
    src: url(http://www.youodmain.ru/comic_font_file.eot); }
    Поддерживается IE начиная с 4.0

    import - импортирует внешную таблицу стилей.
    @import url("{Интернет-адрес файла таблицы стилей}");
    Пример:
    @import url("http://www.youdomain.ru/style_file.css");
    Поддерживается IE начиная с 4.0

    page - используется при задании размеров, ориентаций и полей печатной страницы в таблице стилей.
    @page {Селектор страницы} {Правила}
    Селектор страницы может принимать одно из трех значений:
    first: - первая печатная страница;
    left: - четная страница;
    right: - нечетная страница.
    Пример:
    @page :first {margin-top: 2cm; margin-bottom: 2cm;}
    Здесь мы задали для первой печатной страницы поля по два сантиметра сверху и снизу.
    Поддерживается IE начиная с 5.5

    important - используется для задания неперекрываемых установок стиля.
    {Установки слиля}!important
    Пример:
    <STYLE>
    P { color: red !important}
    </STYLE>
    <P style="color: green">Этот текст останется красным.</P>
    Здесь установки, сделанные для текстового абзаца <P>, не будут перекрыты в дальнейшем.
    Поддерживается IE начиная с 4.0

    Единицы измерения CSS

    В этой таблице перечислены все единицы измерения, поддерживаемые CSS.

    Единица измеренияОбозначение
    Высота буквы M текущего шрифтаem
    Высота буквы x текущего шрифтаex
    Пикселыpx
    Пунктыpt
    Пикиpc
    Дюймыin
    Миллиметрыmm
    Сантиметрыcm

    Пару вводных слов

    Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.

    Синтаксис:

    "filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"

    Некоторые фильтры могут быть без параметров.

    Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.
    Далее будут мною описаны 18 статических и 19 динамических фильтра.

    Фильтры применяют через параметр STYLE:
    Возьм╦м картинку (img.gif) и применим к ней фильтр прозрачности:
    <IMG SRC=img.gif STYLE="filter:alpha(opacity=50)"> - имеем ту же картинку, но полупрозрачную.

    Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
    JavaScript:
    <script language="JavaScript">
    function Blur(inc){
    Pic.filters.blur.strength+=inc;}
    </script>
    ...
    <IMG ID=Pic SRC=img.gif
    STYLE="filter:blur(strength=10)"
    OnMouseOver="javascript:Blur(20)"
    OnMouseOut="javascript:Blur(-20)">

    Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.

    VBScript:
    <script language="VBScript"> Pic.style.filter = "flipv" </script> ... <IMG ID=Pic SRC=img.gif>

    Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.

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

    Alpha

    Задает уровень прозрачности элемента страницы.

    При настройке этого фильтра можно использовать следующие параметры:
    Opacity
    - Задает уровень прозрачности для элемента. Значение прозрачности может быть в пределах от 0 (полная прозрачность) до 100 (полностью непрозрачен).
    Style
    - Задает вид градиентной прозрачности: 0 (по умолчанию)-нет градиента, 1-линейный градиент, 2-круговой градиент, 3-прямоугольный градиент
    StartX
    - Горизонтальная координата, с которой начинается область градиентной прозрачности. Задается в пикселях.
    StartY
    - Вертикальная координата, с которой начинается область градиентной прозрачности. Задается в пикселях.
    FinishX
    - Горизонтальная координата, в которой заканчивается область градиентной прозрачности. Задается в пикселях.
    FinishY
    - Вертикальная координата, в которой заканчивается область градиентной прозрачности. Задается в пикселях.
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    AlphaImageLoaded

    Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.

    При настройке этого фильтра можно использовать следующие параметры:
    src
    - URL-адрес файла с изображением.
    SizingMethod
    - Способ размещения изображения в пределах элемента страницы.
    SezingMethod="crop" - обрезание изображения
    SezingMethod="image"(по умолч.) - уменьшение или увеличение самого элемента страницы
    SezingMethod="scale" - уменьшение или увеличение изображения
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    BasicImage

    Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.

    Отдельно можно задавать угол поворота, стерень "просвеченности".

    При настройке этого фильтра можно использовать следующие параметры:
    GrayScale=1
    - Элемент страницы отображается черно-белым
    GrayScale=0 (по умолчанию)
    - Цветным
    Invert=1
    - Элемент страницы отображается с инвертированными цветами
    Invert=0 (по умолчанию)
    - Элемент страницы отображается как обычно
    MaskColor
    - Цвет, на который будет заменен прозрачный цвет элемент страницы
    Masc=1
    - Прозрачный цвет элемента страницы будет заменен значением свойства MaskColor
    Masc=0 (по умолчанию)
    - Не будет
    Mirror=1
    - Элемент страницы будет отображен зеркально
    Mirror=0 (по умолчанию)
    - Элемент страницы будет отображен как обычно
    Opacity
    - Уровень прозрачности элемента страницы. Варьируется в пределах от 0.0 до 1.0
    Rotation
    - Задает поворот элемента страницы. Доступны всего 4-е занчения: 0 (по умолчанию) - нет поворота, 1 - на 90 градусов, 2 - на 180 градусов и 3 - на 270 градусов
    XRay=1
    - Элемент страницы будет "просвечен рентгеновскими лучами"
    XRay=0 (по умолчанию)
    - Как обычно
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Blur

    Делает элемент страницы размытым.

    При настройке этого фильтра можно использовать следующие параметры:
    MakeShadow=true
    - Элемент страницы будет отображаться как тень
    MakeShadow=false (по умолчанию)
    - Элемент страницы будет отображаться как обычно
    PixelRadius
    - Задает размер области размытия. Может принимать значения от 0.0 до 100.0
    ShadowOpacity
    - Указывает прозрачность тени. Может принимать заначения от 0.0 (что соответствует полной прозрачности) до 1.0 (полная непрозрачность)
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Chroma

    Делает прозрачным отдельный цвет элемента.

    При настройке этого фильтра можно использовать следующие параметры:
    Color
    - Задает цвет, который будет прозрачным
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Compositor

    Объеденяет два цвета элемента страницы и выводит что получилось.

    При настройке этого фильтра можно использовать следующие параметры:
    Function
    - Функция преобразования
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    DropShadow

    Отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента.

    При настройке этого фильтра можно использовать следующие параметры:
    Color
    - Цвет
    OffX
    - Горизонтальное смещение тени
    OffY
    - Вертикальное смещение тени
    Positive=true (по умолчанию)
    - Тень создается из прозрачных пикселов элемента страницы
    Positive=false
    - Тень создается из непрозрачных пикселов элемента страницы ("негативная" тень)
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Emboss

    Делает элемент страницы выпуклым.

    При настройке этого фильтра можно использовать следующие параметры:
    Bias
    - Процентное значение, добавляемое к цвету элемента
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Engrave

    Делает элемент страницы вдавленным.

    При настройке этого фильтра можно использовать следующие параметры:
    Bias
    - Процентное значение, добавляемое к цвету элемента
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Glow

    Создает эффект "тления" элемента страницы.

    При настройке этого фильтра можно использовать следующие параметры:
    Color
    - Цвет
    Strength
    - Расстояние в пикселях, на которое выполняется "тление"
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Gradient

    Эффект градиентной закраски элемента страницы.

    При настройке этого фильтра можно использовать следующие параметры:
    StartColor,StartColorStr
    - Начальный цвет градиентной закраски
    EndColor,EndColorStr
    - Конечный цвет градиентной закраски
    GradientType=1 (по умолчанию)
    - Градиентная закраска распологается по горизонтали
    GradientType=0
    - Градиентная закраска распологается по вертикали
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Light

    Создет эффект освещенности элемента страницы.

    Методы, применяемые к этому фильтру:
    AddAmbient({Красный},{Зеленый},{Синий},{Интенсивность})
    - Добавляет источник рассеянного света с заданными цветовыми параметрами
    AddCone({x1},{y1},{z1},{x2},{y2},{Красный},{Зеленый},{Синий},{Интенсивность},{Угол})
    - Добавляет источник направленного света с заданными цветовыми параметрами. Параметры x1,y1,z1 задают координаты источника света, x2,y2 - точки, куда падает свет.
    AddPoint({x},{y},{z},{Красный},{Зеленый},{Синий},{Интенсивность})
    - Добавляет источник направленного света с заданными цветовыми параметрами. Координаты x,y,z - координаты источника света.
    ChangeColor({╧},{Красный},{Зеленый},{Синий},1|0)
    - Изменяет цвет источника света с заданным номером на указанный цвет. Последний параметр указывает, будет абсолютное (1) или относительное (0) изменение цвета.
    ChangeStrength({╧},{Интенсивность},1|0)
    - Изменяет интенсивность света источника с заданным номером. Последний параметр указывает, будет абсолютное (1) или относительное (0) изменение интенсивности.
    Clear()
    - Удаляет все источники света
    MoveLight({╧},{x},{y},{z},1|0)
    - Перемещает источник света с заданным номером в место с заданными координатами. Последний параметр указывает, будет абсолютное (1) или относительное (0) перемещение.
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    MaskFilter

    Отображает прозрачный цвет элемента страницы заданным цветом.

    При настройке этого фильтра можно использовать следующие параметры:
    Color
    - Задает цвет, которым замениться прозрачный цвет элемента страницы.
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Matrix

    Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.

    При настройке этого фильтра можно использовать следующие параметры:
    Dx
    - Значения fDx матричных преобразований
    Dy
    - Значения fDy матричных преобразований
    FilterType
    - Задает тип пикселов нового содержимого.
    "bilinear" (по умолчанию)
    "nearest neighbor"
    M11,M12,M21,M22
    - Значения fM11,fM12,fM21,fM22 матричных преобразований
    SizingMethod
    - Определяет способ размещения нового изображения в пределах элемента страницы, к которому применяется фильтр. Это свойство может иметь два значения:
    "clip to original" (по умолчанию) - обрезание изображения
    "auto expand" - уменьшение или увеличение изображения
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    MotiobBlur

    Создает эффект быстрого движения (размытости).

    При настройке этого фильтра можно использовать следующие параметры:
    Add
    - Имеет 2 значения:
    true - исходный элемент страницы перекрывает результат работы фильтра
    false (по умолчанию) - результат работы фильтра перекрывает исходный элемент страницы
    Direction
    - Задает направление работы фильтра в градусах, которые должны быть кратны 45.
    Strength
    - Дистанция, задаваемая в пикселях, на которую выполняется работа фильтра
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Pixelate

    Отображает элемент страницы отдельными пикселами.

    При настройке этого фильтра можно использовать следующие параметры:
    MaxSquare
    - Этот параметр задает максимальный размер пикселов
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Shadow

    Создает эффект отбрасывания тени у элемента страницы.

    При настройке этого фильтра можно использовать следующие параметры:
    Color
    - Цвет тени
    Direction
    - Задает направление тени в градусах, которые должны быть кратны 45
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Wave

    Создает волнистое искажение элемента страницы.

    При настройке этого фильтра можно использовать следующие параметры:
    Add
    - Доступны два параметра:
    true - элемент страницы, к которому был применени фильтр закроет результат фильтрации
    false (по умолчанию) - результат фильтрации перекроет исходный элемент страницы
    Freq
    - Задает количество волн
    LightStrength
    - Окраска волн. Может принимать значение от 0 до 100
    Phase
    - Фаза волн. Может принимать значение от 0 до 100
    Strength
    - Дистанция, указанная в пикселах, на которую органицуется фильтрация
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Динамические фильтры : Barn


    Динамический фильтр Barn(): как это выглядит
    Динамический фильтр Barn()

    Создает эффект "открывающейся и закрывающейся двери".
     Orientation:    Motion: 

     Duration: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Barn()
    - Создает эффект "открывающейся и закрывающейся двери".

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Barn(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Barn(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
    motion Motion Задает или возвращает направление движения: от центра к границам или наоборот.
    Свойство может принимать два значения:
  • out - движение происходит из центра к границам (значение по умолчанию);
  • in - движение происходит от границ к центру.
    		•
    orientation Orientation Задает или возвращает направление преобразования: по вертикали или по горизонтали.
    Свойство может принимать два значения:
  • horizontal - преобразование происходит по горизонтали;
  • vertical - по вертикали.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру:

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Barn():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR><BR>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Barn(
                duration=2, motion='out', orientation='vertical');">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out) ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Blinds


    Динамический фильтр Blinds(): как это выглядит
    Динамический фильтр Blinds()

    Создает эффект "открывающихся и закрывающихся жалюзи".
     Bands:    Direction: 

     Duration: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Blinds()
    - Создает эффект "открывающихся и закрывающихся жалюзи".

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Blinds(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Blinds(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    bands bands Задает или возвращает количество полос, на которые разделяется область.
    Direction Direction Задает или возвращает направление, в которое происходит открытие полосок.
    Свойство может принимать следующие значения:
  • up - открытие вверх;
  • down - вниз;
  • right - вправо;
  • left - влево.
    		•
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру:

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Blinds():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();      

// Устанавливаем случайное число "шторок".    
    oDiv.filters[0].bands =  Math.random()*12 + 3;    

// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play(duration=3);
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Blinds(
                direction='down');">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Blinds(bands=2,  direction='RIGHT') ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : CheckerBoard


    Динамический фильтр CheckerBoard(): как это выглядит
    Динамический фильтр CheckerBoard()

    Создает эффект "открывающихся и закрывающихся жалюзи".
     squaresX:     squaresY: 

     Duration:   Direction: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    CheckerBoard()
    - Создает эффект шахматной доски.

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.CheckerBoard(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.CheckerBoard(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    direction Direction Задает или возвращает направление, в которое происходит открытие полосок.
    Свойство может принимать следующие значения:
  • up - открытие вверх;
  • down - вниз;
  • right - вправо;
  • left - влево.
    		•
    squaresX SquaresX Задает или возвращает количество колонок, использующихся для отображения фильтра.
    squaresY SquaresY Задает или возвращает количество строк, использующихся для отображения фильтра.
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      Status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру:

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра CheckerBoard():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.CheckerBoard(
                duration=5, direction='left');">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; 
    width: 300px;height:300px;  filter:progid:DXImageTransform.Microsoft.Checkerboard(squaresX=12,
     squaresY=8, direction='right', duration=1) ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Fade


    Динамический фильтр Fade(): как это выглядит
    Динамический фильтр Fade()

    Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется.
     Duration:   Overlap: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Fade()
    - Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется.

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Fade(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Fade(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    overlap Overlap Задает или возвращает время одновременного показа старого содержимого объекта и нового относительно общей продолжительности работы фильтра.
    Может принимать значения от 0,0 до 1,0
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      Status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру:

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Fade():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Fade( 
                duration=2);">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0) ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : GradientWipe


    Динамический фильтр GradientWipe(): как это выглядит
    Динамический фильтр GradientWipe()

    Создает наползание нового содержимого элемента страницы на старое, причем граница выглядит как градиентная полоса.
     GradientSize: 

     WipeStyle: 

     Motion: 

    Duration: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    GradientWipe()
    - Создает наползание нового содержимого элемента страницы на старое, причем граница выглядит как градиентная полоса.

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.GradientWipe(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.GradientWipe(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре GradientWipe:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
    gradientSize GradientSize Задает или возвращает часть площади элемента страницы, которая будет покрыта градиентной полосой.
    Может принимать значения от 0.0 до 1.0
    motion Motion Задает или возвращает направление преобразования: прямое или обратное.
    Свойство может принимать следующие значения:
  • forward - движение происходит согласно значению свойства WipeStyle (значение по умолчанию);
  • reverse - в обратном направлении.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      Status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•
      WipeStyle Задает или возвращает направление преобразования: по горизонтали или по вертикали.
    Свойство может принимать следующие значения:
  • 0 - едвижение происходит по горизонтали (значение по умолчанию);
  • 1 - движение происходит по вертикали.
    		•

    Методы, которые могут быть применены к фильтру GradientWipe():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра GradientWipe():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="orange";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: orange;
                filter:progid:DXImageTransform.Microsoft.gradientWipe(
                duration=3, gradientsize=0.5);">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Wipe(
        GradientSize=1.0, wipeStyle=0, motion='forward') ">

<!-- Это первое содержимое, которое будет показано. -->

<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2</DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play(duration=2);}
</SCRIPT>

    Динамические фильтры : Inset


    Динамический фильтр Inset(): как это выглядит
    Динамический фильтр Inset()

    Новое содержимое элемента страницы диагонально заменяет старое.
     Duration: 
       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Inset()
    - Новое содержимое элемента страницы диагонально заменяет старое.

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Inset(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Inset(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Inset:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      Status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Inset():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Inset():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play(duration=2);  // Set duration as a parameter of Play.
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Inset( );">
</DIV>
    Пример 2: 
    <SCRIPT>
var bTranState = 0;
function fnToggle() {
		oDIV2.filters[0].Apply();
	if (bTranState) { 
		bTranState = 0;
		oDIV2.style.visibility="hidden";    }
	else {  
		bTranState = 1;
		oDIV2.style.visibility="visible";   }
		oDIV2.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1  </DIV>

<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
width:240px; height:160px; background: yellowgreen; 
filter:progid:DXImageTransform.Microsoft.Inset()">
<BR>This is DIV #2</DIV>

    Динамические фильтры : Iris


    Динамический фильтр Iris(): как это выглядит
    Динамический фильтр Iris()

    Создает эффект радужной оболочки глаза, подобной открытию объектива камеры.
     IrisStyle:    Motion: 

     Duration: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Iris()
    - Создает эффект радужной оболочки глаза, подобной открытию объектива камеры.

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Iris(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Iris(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре:

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
    irisStyle IrisStyle Задает или возвращает форму лепестков.
    Свойство может принимать следующие значения:
  • Circle - в виде круга;
  • Cross - в виде креста;
  • Plus - плюс;
  • Square - квадрат;
  • Star - звезда.
    		•
    motion Motion Задает или возвращает направление движения: от центра к границам или наоборот.
    Свойство может принимать два значения:
  • out - движение происходит из центра к границам (значение по умолчанию);
  • in - движение происходит от границ к центру.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру:

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Iris():

    Пример 1: 

    <SCRIPT>
<!-- Задаем массив с возможными значениями параметра IrisStyles. -->
var arrIrisStyles = new Array();
arrIrisStyles = ['DIAMOND','CIRCLE','CROSS','PLUS','SQUARE','STAR'];
var iIndexCount = 0;

var bToggle = 0;

function fnToggle() {

<!-- Используем массив для отображения параметра IrisStyles. -->
var  iStyleIndex = iIndexCount%6 ;  // MOD функция предотвращает 
                                    // повторную установку счетчика.
    oDiv.filters[0].irisstyle = arrIrisStyles[iStyleIndex];
    oSpan.innerText = 'IrisStyle = "' + arrIrisStyles[iStyleIndex] + '"';
    
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold"; 
    }
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="green";    
    }  
        
    oDiv.filters[0].Play();
    iIndexCount += 1;
}
</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>

<FONT SIZE="+4" >
<!-- This DIV is the target of the transition. -->
    <DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Iris(
                duration=3);">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
    </DIV>

<SPAN ID="oSpan"></SPAN>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Iris(irisStyle='SQUARE', motion='in') ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Pixelate


    Динамический фильтр Pixelate(): как это выглядит
    Динамический фильтр Pixelate()

    Старое содержимое элемента страницы рассыпается на отдельные пикселы, а новое содержимое собирается из отдельных пикселов.
     MaxSquare: 
    Duration: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Pixelate()
    - Старое содержимое элемента страницы рассыпается на отдельные пикселы, а новое содержимое собирается из отдельных пикселов.

    Синтаксис

    Где:Общий пример использования:Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Pixelate(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Pixelate(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Pixelate():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
    maxSquare MaxSquare Задает или возвращает максимальную ширину в пиксельных квадратах.
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Pixelate():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Pixelate():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.visibility="visible";  }  
    else {
        bToggle = 1;
        oDiv.style.visibility="hidden"; }
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<FONT SIZE="+4">
    <DIV ID="oDiv" STYLE="width:100px; background-color: lightblue;
                filter:progid:DXImageTransform.Microsoft.Pixelate(
                duration=3, enabled='false');">
         Text<BR/>Text<BR/>Text<BR/>
    </DIV>
</FONT>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50,
  Duration=1, Enabled=false) ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].enabled = true;
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : RadialWipe


    Динамический фильтр RadialWipe(): как это выглядит
    Динамический фильтр RadialWipe()

    Старое содержание элемента радиально стирается, наподобие стиранию дворниками на стекле, а новое появляется.
    WipeStyle: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    RadialWipe()
    - Старое содержание элемента радиально стирается, наподобие стиранию дворниками на стекле, а новое появляется.

    Синтаксис

    Где:Общий пример использования фильтра RadialWipe():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.RadialWipe(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.RadialWipe(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре RadialWipe():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
    wipeStyle WipeStyle Задает или возвращает метод, которым будет показываться новое содержимое.
    Свойство может принимать следующие значения:
  • clock - вращение вокруг центра элемента страницы по часовой стрелке (значение по умолчанию);
  • wedge - вращение сразу в обе стороны вокруг центра элемента;
  • radial - радиальное вращение относительно верхнего левого угла.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру RadialWipe():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра RadialWipe():

    Пример 1: 

    <SCRIPT>
<!-- Declare an array and index counter to access wipeStyles. -->
var arrWipeStyles = new Array();
arrWipeStyles = ['CLOCK','WEDGE','RADIAL'];
var iIndexCount = 0;

var bToggle = 0;

function fnToggle() {

<!-- Используем массив для изменения и отображения WipeStyle -->
var  iStyleIndex = iIndexCount%3 ;  // MOD function avoids resetting the counter.
    oDiv.filters[0].wipeStyle = arrWipeStyles[iStyleIndex];
    oSpan.innerText = 'WipeStyle = "' + arrWipeStyles[iStyleIndex] + '"';
    
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";  }
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="green"; }  
        
    oDiv.filters[0].Play();
    iIndexCount += 1;
}
</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>

<FONT SIZE="+4" >
<!-- Этот DIV является целью перехода -->
    <DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.RadialWipe(
                duration=2);">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
    </DIV>

<SPAN ID="oSpan"></SPAN> 
</FONT>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock') ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : RandomBars


    Динамический фильтр RandomBars(): как это выглядит
    Динамический фильтр RandomBars()

    Старое содержимое элемента страницы рассыпается на отдельные линии, а новое содержимое собирается из отдельных линий.
    Orientation: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    RandomBars()
    - Старое содержимое элемента страницы рассыпается на отдельные линии, а новое содержимое собирается из отдельных линий.

    Синтаксис

    Где:Общий пример использования фильтра RandomBars():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.RandomBars(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.RandomBars(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре RandomBars():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
    orientation Orientation Задает или возвращает направление преобразования.
    Свойство может принимать следующие значения:
  • horizontal - преобразование происходит в вертикальной плоскости (значение по умолчанию);
  • vertical - преобразование происходит в вертикальной плоскости.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру RandomBars():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра RandomBars():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].orientation="vertical";
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play
    
    
    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.RandomBars(
                duration=5);">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.RandomBars(orientation='horizontal') ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : RandomDissolve


    Динамический фильтр RandomDissolve(): как это выглядит
    Динамический фильтр RandomDissolve()

    Создает эффект поточечного появления нового содержимого на месте старого.
    Duration: 

       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    RandomDissolve()
    - Создает эффект поточечного появления нового содержимого на месте старого.

    Синтаксис

    Где:Общий пример использования фильтра RandomDissolve():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.RandomDissolve(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.RandomDissolve(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре RandomDissolve():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру RandomDissolve():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра RandomDissolve():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.visibility="visible";  }  
    else {
        bToggle = 1;
        oDiv.style.visibility="hidden"; }
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.RandomDissolve(
                duration=3);">
	<FONT SIZE="+4" COLOR="#A08000">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
	</FONT>
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.RandomDissolve() ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Slide


    Динамический фильтр Slide(): как это выглядит
    Динамический фильтр Slide()

    Старое содержимое элемента страницы сдвигается в сторону, открывая под собой новое содержимое (эффект слайдов).
    SlideStyle:  Bands: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Slide()
    - Старое содержимое элемента страницы сдвигается в сторону, открывая под собой новое содержимое (эффект слайдов).

    Синтаксис

    Где:Общий пример использования фильтра Slide():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Slide(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Slide(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Slide():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    slideStyle SlideStyle Задает или возвращает способ замещения старого содержимого элемента страницы новым.
    Свойство может принимать следующие значения:
  • Hide - Старое содержимое уходит влево открывая под собой новое содержимое элемента страницы (значение по умолчанию);
  • Push - новое содержимое идет вслед за старым;
  • Swap - старое и новое содерижимое страницы как бы меняются местами.
    		•
    bands Bands Задает или возвращает количество полос, на которые разбиваются элементы страницы при преобразовании.
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Slide():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Slide():

    Пример 1: 

    <SCRIPT>
<!-- Declare an array and index counter to access  slideStyles. -->
var arrSlideStyles = new Array();
arrSlideStyles = ['HIDE','PUSH','SWAP'];
var iIndexCount = 0;

var bToggle = 0;

function fnToggle() {

<!-- В массиве задаем значения для параметра slideStyle. -->
var  iStyleIndex = iIndexCount%3 ;  // MOD function avoids resetting the counter.
    oDiv.filters[0].slideStyle = arrSlideStyles[iStyleIndex];
    oSpan.innerText = 'SlideStyle = "' + arrSlideStyles[iStyleIndex] + '"';
    
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold"; 
	}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="green";    
 	}  
        
    oDiv.filters[0].Play();
    iIndexCount += 1;
}
</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>

<FONT SIZE="+4" >
<!-- This DIV is the target of the transition. -->
    <DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Slide(
                duration=3, bands='8');">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
    </DIV>

<SPAN ID="oSpan"></SPAN> 
</FONT>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='SWAP', bands=5) ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Spiral


    Динамический фильтр Spiral(): как это выглядит
    Динамический фильтр Spiral()

    Старое содержимое элемента страницы спирально закрашивается новым содержимым.
    GridSizeX:  GridSizeY: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Spiral()
    - Старое содержимое элемента страницы спирально закрашивается новым содержимым.

    Синтаксис

    Где:Общий пример использования фильтра Spiral():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Spiral(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Spiral(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Spiral():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    gridSizeX GridSizeX Задает или возвращает ширину закрашивающей полоски по горизонтали.
    Свойство может принимать значение от 1 до 100.
    gridSizeY GridSizeY Задает или возвращает ширину закрашивающей полоски по вертикали.
    Свойство может принимать значение от 1 до 100.
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Spiral():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Spiral():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.visibility="visible";  }  
    else {
        bToggle = 1;
        oDiv.style.visibility="hidden"; }
        
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Spiral(
                duration=3, GridSizeX=25, GridSizeY=25);">
	<FONT SIZE="+4" COLOR="#A08000">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
	</FONT>
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Spiral(GridSizeX=8, GridSizeY=64) ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Stretch


    Динамический фильтр Stretch(): как это выглядит
    Динамический фильтр Stretch()

    Этот фильтр растягивает новое содержимое элемента страницы, тем самым закрывая старое содержимое.
    StretchStyle: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Stretch()
    - Этот фильтр растягивает новое содержимое элемента страницы, тем самым закрывая старое содержимое.

    Синтаксис

    Где:Общий пример использования фильтра Stretch():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Stretch(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Stretch(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Stretch():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    stretchStyle StretchStyle Задает или возвращает способ замещения старого содержания элемента страницы новым.
    Для свойства доступны следующие значения:
  • Hide - новое содержание элемента наползает на старое слева на право (значение по умолчанию);
  • Spin - новое содержание элемента страницы наползает на старое из середины элемента к бокам;
  • Push - новое содержание элемента страницы раздвигаясь с левого бока, сжимает старое содержание.
    		•
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Stretch():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Stretch():

    Пример 1: 

    <SCRIPT>
<!-- Задаем в массиве значения свойства stretchStyles. -->
var arrStretchStyles = new Array();
arrStretchStyles = ['HIDE','PUSH','SPIN'];
var iIndexCount = 0;

var bToggle = 0;

function fnToggle() {

<!-- Use the array index to update and display  the stretchStyle used. -->
var  iStyleIndex = iIndexCount%3 ;  // MOD function avoids resetting the counter.
    oDiv.filters[0].stretchstyle = arrStretchStyles[iStyleIndex];
    oSpan.innerText = 'StretchStyle = "' + arrStretchStyles[iStyleIndex] + '"';
    
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold"; 
    }
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="green";    
    }  
        
    oDiv.filters[0].Play();
    iIndexCount += 1;
}
</SCRIPT>
<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>

<FONT SIZE="+4" >
<!-- This DIV is the target of the transition. -->
    <DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Stretch(
                duration=3);">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
    </DIV>

<SPAN ID="oSpan"></SPAN> 
</FONT>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push') ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Strips


    Динамический фильтр Strips(): как это выглядит
    Динамический фильтр Strips()

    Новое содержимое элемента страницы диагонально отдельными полосками наползает на старое содержимое.
    Motion: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Strips()
    - Новое содержимое элемента страницы диагонально отдельными полосками наползает на старое содержимое.

    Синтаксис

    Где:Общий пример использования фильтра Strips():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Strips(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Strips(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Strips():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    motion Motion Задает или возвращает угол, из которого появится новое содержимое элемента.
    Для свойства доступны следующие значения:
  • left-down - левый нижний (значение по умолчанию);
  • left-up - левый верхний;
  • right-down - правый нижний;
  • right-up - правый верхний.
    		•
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Strips():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Strips():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Strips(
                duration=5, motion='rightdown');">
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.Strips(Duration=2, Motion='leftdown') ">

<!-- Это первое содержимое, которое будет показано. -->

    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play();}
</SCRIPT>

    Динамические фильтры : Wheel


    Динамический фильтр Wheel(): как это выглядит
    Динамический фильтр Wheel()

    Создает эффект посекторного наползания нового элемента страницы на старый.
    Spokes: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    Wheel()
    - Создает эффект посекторного наползания нового элемента страницы на старый.

    Синтаксис

    Где:Общий пример использования фильтра Wheel():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.Wheel(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.Wheel(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре Wheel():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    spokes Spokes Задает или возвращает количество секторов.
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру Wheel():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра Wheel():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Wheel(
                duration=2, spokes=8);">
</DIV>
    Пример 2: 
    <SCRIPT>
var bTranState = 0;
function fnToggle() {
		oDIV2.filters[0].Apply();
	if (bTranState) { 
		bTranState = 0;
		oDIV2.style.visibility="hidden";    }
	else {  
		bTranState = 1;
		oDIV2.style.visibility="visible";   }
		oDIV2.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1  </DIV>

<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
width:240px; height:160px; background: yellowgreen; 
filter:progid:DXImageTransform.Microsoft.Wheel(spokes=10)">
<BR>This is DIV #2</DIV>

    Динамические фильтры : ZigZag


    Динамический фильтр ZigZag(): как это выглядит
    Динамический фильтр ZigZag()

    Новое содержимое элемента страницы зигзагообразно отдельными полосками заполняет старое.
    GridSizeX: 

    GridSizeY: 

    Duration: 


       

    Данный пример можно увидеть, если у Вас установлен Internet Explorer 5.5 или более поздний. Для загрузки последней версии нажмите на кнопку слева.
    ZigZag()
    - Новое содержимое элемента страницы зигзагообразно отдельными полосками заполняет старое.

    Синтаксис

    Где:Общий пример использования фильтра ZigZag():Совместимость:
    HTML 
    <ELEMENT STYLE=
  "filter:progid:DXImageTransform.Microsoft.ZigZag(sProperties)" ... >
    		Internet Explorer 5.5 или выше
    Script 
    object.style.filter =
   "progid:DXImageTransform.Microsoft.ZigZag(sProperties)"
    		Internet Explorer 5.5 или выше

    Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

    Свойства, используемые в фильтре ZigZag():

    Атрибуты
    Исползуются в HTML    		 Свойства
    Исползуются в скриптах    		 Описание
    gridSizeX GridSizeX Задает или возвращает количество полосок по горизонтали.
    Свойство может принимать значения от 1 до 100.
    gridSizeY GridSizeY Задает или возвращает количество полосок по вертикали.
    Свойство может принимать значения от 1 до 100.
    duration Duration Задает или возвращает продолжительность преобразования в секундах.
    enabled Enabled Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:
  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.
    		•
      Percent Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
      status Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:
  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
    		•

    Методы, которые могут быть применены к фильтру ZigZag():

    Метод Описание
    apply Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
    Для того, чтобы запустить преобразование, используйте метод Play().
    play Запускает преобразование.
    stop Немедленно останавливает преобразование.

    Примеры использования динамического фильтра ZigZag():

    Пример 1: 

    <SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.visibility="visible";  }  
    else {
        bToggle = 1;
        oDiv.style.visibility="hidden"; }
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Zigzag(
                duration=3, GridSizeX=25, GridSizeY=25);">
	<FONT SIZE="+4" COLOR="#A08000">
        TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
	</FONT>
</DIV>
    Пример 2: 
    <!-- К этому элементу применяется фильтр. -->

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; 
height:300px;  filter:progid:DXImageTransform.Microsoft.zigzag(GridSizeX=64, GridSizeY=64) ">

<!-- Это первое содержимое, которое будет показано. -->

<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1  </DIV>

<!-- Это содержимое, которое будет показано после применения фильтра. -->

<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2</DIV> 
</DIV>

<BUTTON onclick="fnToggle()">Запустить преобразование</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
		bTranState = 1;
        oDIV2.style.visibility="visible"; 
		oDIV1.style.visibility="hidden";}
    else {  
		bTranState = 0;
        oDIV2.style.visibility="hidden"; 
		oDIV1.style.visibility="visible";}
    	oTransContainer.filters[0].Play(duration=3);}
</SCRIPT>

    Материалы сайта Справочник Web-языков www.spravkaweb.ru
    Скачать обновленный справочник можно отсюда


    HIVE: All information for read only. Please respect copyright!
    Hosted by hive йца: йХЕБЯЙЮЪ ЦНПНДЯЙЮЪ АХАКХНРЕЙЮ