White cat - Справочник по CSS

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

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

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

Задает или возвращает направление преобразования: прямое или обратное.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Задает или возвращает направление преобразования: по горизонтали или по вертикали.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 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()

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

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

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 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()

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

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

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

Задает или возвращает форму лепестков.

Задает или возвращает направление движения: от центра к границам или наоборот.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 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()

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

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

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 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()

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

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

Похожие книги на "Справочник по CSS", white cat читать полностью, без сокращений.

White cat - Справочник по

White cat - Справочкик по

White cat - Справочник по PHP

Дитмар Розенталь - СПРАВОЧНИК

Денис Алексеев - Краткий