White cat - Справочник по CSS
Скачивание начинается... Если скачивание не началось автоматически, пожалуйста нажмите на эту ссылку.
Жалоба
Напишите нам, и мы в срочном порядке примем меры.
Описание книги "Справочник по CSS"
Описание и краткое содержание "Справочник по CSS" читать бесплатно онлайн.
Вниманию читателей предлагается справочник по CSS.
Справочник предназначается для людей, уже освоивших азы работы с HTML и CSS.
Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.
Barn
Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь 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();}</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()
Создает эффект "открывающихся и закрывающихся жалюзи"
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает направление, в которое происходит открытие полосок.
Задает или возвращает признак разрешения применения фильтра.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 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
Fade()
Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется
Здесь 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();}</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>
Fade
Fade()
Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется
Здесь 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();}</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()
Создает наползание нового содержимого элемента страницы на старое, причем граница выглядит как градиентная полоса
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Справочник по CSS"
Книги похожие на "Справочник по CSS" читать онлайн или скачать бесплатно полные версии.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "White cat - Справочник по CSS"
Отзывы читателей о книге "Справочник по CSS", комментарии и мнения людей о произведении.