Трансформации CSS3 без псевдо-класса hover
В настоящее время наиболее часто трансформации CSS3 используются в сочетании с хорошо известным псевдо-классом CSS :hover
.
Типовая конструкция для анимированого изменения цвета ссылки на чистом CSS выглядит следующим образом:
a, a:link, a:visited { color: lightblue; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -o-transition: color .4s linear; -ms-transition: color .4s linear; transition: color .4s linear; } a:hover { color: white; }
Данный код анимирует изменение свойства color при наведении курсора мыши на ссылку. Достаточно просто, и вы наверняка встречались с подобными конструкциями. Но трансформации не ограничиваются в использовании только псевдо-классом :hover
.
Вы можете анимировать изменения свойств CSS с помощью трансформаций при использовании других методов, некоторые из которых перечислены ниже. Для каждого метода приводится пример, который открывается на отдельной странице при нажатии на название метода.
Псевдо-класс :active
соответсвует любому элементу, который находится в состоянии активации. Состояние активации обычно происходит в момент нажатия на элементе кнопки мыши.
Вот такой код используется в демонстрации для имитации события mousedown
:
.box { width: 300px; height: 300px; background: #222; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; } .box:active { width: 500px; height: 500px; }
Данный код будет изменять размеры прямоугольника, пока на нем удерживается нажатой кнопка мыши. Если кнопку мыши отпустить, размеры изменяются к своему первоначальному значению.
Для просмотра демонстрации нажмите на название метода.
Подобным образом можно использовать псевдо-класс :focus
. В примере демонстрируется изменение ширины поля ввода текста в форме при получении фокуса ввода:
input, textarea { width: 280px; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } input:focus, textarea:focus { width: 340px; }
Для просмотра демонстрации нажмите на название метода.
Можно анимировать радио кнопки и чекбоксы, когда они становятся отмеченными. Хотя они и сохраняют свои оригинальные стили.
В демонстрации изменяется ширина отмеченных чекбоксов:
input { height: 20px; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } input:checked { width: 30px; }
Для просмотра демонстрации нажмите на название метода.
Комбинируя JavaScript (в примере jQuery) с трансформациями CSS3 сделаем эффектное изменение цвета фона элемента при отключении атрибута disabled.
input[type="text"], textarea { background: #e2e2e2; -webkit-transition: background 1s ease; -moz-transition: background 1s ease; -o-transition: background 1s ease; -ms-transition: background 1s ease; transition: background 1s ease; } input:disabled, textarea:disabled { background: #666666; }
Ниже приведенный код jQuery служит для установки и отключения атрибута disabled
:
$(function() { $('input[type="radio"]').click(function() { if ($(':checked').val() === "other") { $('input[type="text"]').removeAttr("disabled"); } else { $('input[type="text"]').attr("disabled", "disabled"); } }); });
Когда отмечается последняя радио кнопка, атрибут selected
снимается. А если отметить другую опцию, то атрибут selected
восстанавливается.
Псевдо-класс :disabled
зависит от атрибута, поэтому при установке/снятии отметки происходит анимация изменения свойств элемента.
Для просмотра демонстрации нажмите на название метода.
В завершении рассмотрим также использование медиа запросов. При изменении размеров экрана элементы также могут плавно изменять свои размеры.
.box { width: 440px; height: 440px; background: #222; margin: 0 auto; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; } @media only screen and (max-width : 960px) { .box { width: 300px; height: 300px; } }
В примере одновременно происходит изменение двух свойств элемента, когда размер экрана становится меньше 961px.
Для просмотра демонстрации нажмите на название метода.
Заключение
В код примеров включен префикс -ms-
. Хотя даже IE9 и IE10 пока не поддерживают трансформации CSS3, ожидается, что Microsoft снабдит свое детище новыми возможностями.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/I_jucD5trl4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.