Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

CSS-Transitions и псевдо-классы CSS :hover, active, focus, checked, disabled и Медиа-запросы

Скопируйте и вставте
Внутри тега <HEAD> - </HEAD>
<link rel="stylesheet" href="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/raznoe/1067/style.css" type="text/css">
Стили и параметры анимации всех примеров сведены в одну таблицу стилей, файл style.css. Стили каждого примера подписаны. Если Вы хотите что-то поменять Вам нужно, воспользовавшись функцией [Скачать с сервера], скачать данный файл и внести необходимые изменения.
Пример1 с hover	CSS-Transitions с использованием :hover Наиболее распространенным вариантом использования CSS-transitions – сочетание его с хорошо известным псевдо-классом CSS :hover. Далее представлен наиболее простой пример изменения цвета ссылки, при наведении мыши, выполненный на чистом CSS: <a href="#" class="prim_hover">Пример1 с hover</a> Этот код запустит анимацию свойства color, когда вы подведете мышь к ссылке. Но использование transitions не ограничивается использованием псевдо-класса :hover. С помощью transitions, вы можете анимировать различные CSS-свойства, используя определенные CSS-приемы. Некоторые из этих приемов, приведены в 'этой статье.

	CSS-Transitions с использованием :active Псевдо-класс :active применяется к любому элементу, находящемуся в процессе активации. Основным способом “активации” элемента, является щелчок мышью или нажатие левой кнопки мыши. Здесь представлен CSS-пример, демонстрирующий использование :active совместно с CSS3-transitons, для имитации события mousedown: Кликните по блоку, нажмите и удерживайте кнопку мыши. Попробуйте кликать и держать кнопку в течение разного количества времени. <div class="box" id="box-active" style="border: #ff0000 1px solid;"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/raznoe/1067/Lion.gif"></div> Подведите курсор мыши к блоку и нажмите кнопку, вы увидите как высота и ширина блока анимируются, становясь больше, пока вы держите кнопку нажатой. Стоит вам отпустить кнопку, и размеры блока плавно вернутся к исходному значению.

Имя: Email: Комментарий:	CSS3-Transitions с использованием :focus Вы могли использовать псевдо-класс :focus, для получения эффекта, описанного в предыдущем примере. Мы сделаем это в этот раз. Мы используем форму, и анимируем ширину любого элемента формы, получившего фокус: Используя мышь или клавиатуру, поставьте курсор мыши внутри любого из полей формы. <form id="focus-form"> <fieldset> <div> <label>Имя:</label> <input type="mail"> </div> <div> <label>Email:</label> <input type="email"> </div> <div class="ta"> <label>Комментарий:</label> <textarea></textarea> </div> <input value="Отправить" type="button"> </fieldset> </form> Без JavaScript. Это выполнено с помощью CSS псевдо-класса `:focus` для трансформации (или анимации) ширины элементов формы.

Чекбокс 1 Чекбокс 2 Чекбокс 3 Чекбокс 4	CSS3 Transitions с использованием :checked Вы можете анимировать чекбоксы и радиокнопки, когда они становятся отмеченными – хотя, тут есть некоторые ограничения, поскольку вы не можете изменить их родную стилизацию. Поэтому, мы сделаем простое изменение ширины, которое будет появляться в качестве подтверждения отметки текущего элемента: Отметьте и/или снимите отметку с любого из чекбоксов, расположенных ниже. Отступ вокруг чекбокса будет анимирован. <form class="checked-form" id="chk-box" style="border: #ff0000 1px solid;"> <fieldset> <div> <input name="things" value="thing1" type="checkbox"> Чекбокс 1<br> <input name="things" value="thing2" type="checkbox"> Чекбокс 2<br> <input name="things" value="thing3" type="checkbox"> Чекбокс 3<br> <input name="things" value="thing4" type="checkbox"> Чекбокс 4<br> </div> </fieldset> </form> Без JavaScript. Это выполнено с помощью CSS псевдо-класса `:checked` для трансформации (или анимации) ширины чекбокса.

Мне нравятся: Черепахи Куклы Снежные люди Что-то другое:	CSS3 Transitions с использованием :disabled Продолжая тему стилизации веб-форм, в этот раз мы комбинируем css3-transitions с jQuery, для запуска анимации фонового цвета элементов формы, при их отключении через атрибут disabled: Перед вами набор переключателей. Если вы выберите последний из них, активируется текстовое поле, путем переключения атрибута `disabled`. Фоновый цвет текстового поля будет анимирован с помощью CSS3-transitions. <form class="df" id="dis-block"> <fieldset> <div> <label>Мне нравятся:</label> <input name="things" value="turtles" checked="checked" type="radio"> Черепахи<br> <input name="things" value="muppets" type="radio"> Куклы<br> <input name="things" value="sasquatches" type="radio"> Снежные люди<br> <input name="things" value="other" id="other" type="radio"> Что-то другое: <input disabled="disabled" type="text"> </div> </fieldset> </form> <script src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/raznoe/1067/jquery.js"></script> <script type="text/javascript"> $(function() { $('input[type="radio"]').click(function() { if ($(':checked').val() === "other") { $('input[type="text"]').removeAttr("disabled"); } else { $('input[type="text"]').attr("disabled", "disabled"); } }); }); </script> Итак, если отмечена последняя из радиокнопок ( “Что то другое”), у текстового поля удаляется атрибут disabled, при отметке остальных радиокнопк, атрибут disabled, заново применяется к текстовому полю. Псевдо-класс :disabled применяется к элементу, имеющему одноименный атрибут, поэтому анимация будет срабатывать всякий раз при удалении или добавлении этого атрибута. Когда атрибут `disabled` добавлен или удален, применяется псевдо-класс `:disabled`, анимируя фоновый цвет текстового поля. Анимация цвета выполнена на чистом CSS

	CSS3 Transitions с использованием CSS3 Медиа-запросов Последний пример, возможно, наименее полезный из всех, поскольку, давайте смотреть правде в глаза, единственные люди, изменяющие размер окна браузера, чтобы посмотреть что получится – это веб-разработчики. Тем не менее, это еще один способ использования CSS3-transitions. Измените размер окна браузера. Когда размер вашего окна пересечет границу в 960 пикселей, блок, расположенный ниже, медленно уменьшится или увеличится. <div class="box" id="media"></div> Без JavaScript. Это комбинация CSS3-transitions с медиа-запросами, для анимации блока, при изменении размеров экрана. Этот пример одновременно анимирует два свойства, разделенных запятой. Медиа-запрос велит блоку уменьшиться, если размер экрана становится меньше 961 пикселя. Измените размер окна демонстрационной страницы, чтобы увидеть как это работает.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.